Реагировать и ворчать-Envify узел ENV= 'production' и UglifyJS

Я использую грунт чтобы построить проект React, и я хочу иметь " dev " и "prod" ароматы. Как говорится в документах react:

чтобы использовать React в производственном режиме, установите переменную среды NODE_ENV в production. Минификатор, который выполняет устранение мертвого кода, например UglifyJS рекомендуется полностью удалить дополнительный код, присутствующий в режиме разработки.

Я очень новый, используя grunt, browserify и прочее, но давайте посмотрим. Первый проблема у меня с envify, я использую ее как преобразование:

browserify: {
  options: {
    transform: ['reactify'],
    extensions: ['.jsx']
  },
  dev:{
    options: {
      watch: true //Uses watchify (faster)
    },
    src: ['js/app.js'],
    dest: 'js/bundle.js'
  },
  /**
   * To use React in production mode, set the environment variable NODE_ENV to production.
   * A minifier that performs dead-code elimination such as UglifyJS is
   * recommended to completely remove the extra code present in development mode.
   **/
  prod: {
    options: {
     transform: ['envify'] //How to set up NOD_ENV='production' ?
    },
    src: ['js/app.js'],
    dest: 'js/bundle.js'
  }
},

хорошо, делать grunt: dev работает просто отлично. Поэтому при запуске grunt: prod... Как установить NODE_ENV:'production'? Я имею в виду, я знаю, что я прохожу "envify" как преобразование, но... Понятия не имею, как это использовать.

после этого у меня также есть задача uglify:

uglify: {
 prod: {
   files: {
     'js/bundle.min.js': ['js/bundle.js']
   }
 }
}

поэтому после вызова grunt: prod он создает два файла (bundle.js и bundle-min.js). В производстве я хотел бы иметь только bundle.min.js. Я знаю, я ... может сделать:

Яш/пачка.js': ['js / bundle.js']

но ммм я не знаю, есть ли способ просто переименовать его в bundle.минута.Джей-Эс, наверное... проблема в том, что в HTML у меня есть:

<script src="js/bundle.js"></script>

есть ли здесь также трюк, чтобы он принимал любой пакет.js или bundle.минута.Яш?

спасибо заранее.

8
browserify gruntjs javascript node.js reactjs

3 ответов

преобразования являются локальными, и хорошо сделанные пакеты помещают свои преобразования в свой пакет.файл json. Если вы не используете envify в код, вам не нужно ничего с ним делать.

все что вам нужно это ворчание-env, или другой способ установить переменные среды.

вот альтернатива с помощью пакета.в JSON:

{
  "scripts": {
    "build": "NODE_ENV=development grunt build-dev",
    "dist": "NODE_ENV=production grunt dist"
  }
},
"devDependencies": {
  "grunt": "...",
  "grunt-cli": "..."
}

преимущество здесь в том, что человеку, использующему ваш пакет, даже не нужно устанавливать grunt глобально. npm run build будет работать ./node_modules/.bin/grunt build-dev С правильным набором переменных окружающей среды.

18

Шаг 1 - выполните эту команду, где ваш пакет.json is

npm i grunt-env --save-dev

Шаг 2 - добавьте код в "evn:" к вашему Gruntfile.Яш в грунт.initConfig вот так:

grunt.initConfig({

...

env: {
    prod: {
        NODE_ENV: 'production'
    }
},

...

});

Шаг 3 - добавьте задачу grunt в свой Gruntfile.js

grunt.loadNpmTasks('grunt-env');

Шаг 4 - называйте это, прежде browserify вот так:

grunt.registerTask("default", ["env", "browserify"]);
7

просто дополнение к большому ответу FakeRainBrigand, если вы работаете в Windows (как я), то вам нужен тонко другой синтаксис в вашем :

{
  "scripts": {
    "build": "SET NODE_ENV=development&&grunt build-dev",
    "dist": "SET NODE_ENV=production&&grunt dist"
  }
},
"devDependencies": {
  "grunt": "...",
  "grunt-cli": "..."
}
3