React和Grunt节点_ENV=‘production’和UglifyJS

Question

我正在使用Grunt来构建一个反应项目，我希望有'dev‘和'prod’味道。作为反应，医生们说：

若要在生产模式中使用React，请将环境变量NODE_ENV设置为production。建议使用一个执行死代码消除(如UglifyJS )的缩小器来完全删除开发模式中存在的额外代码。

我是很新的使用咕噜，褐变和其他东西，但让我们看看。我遇到的第一个问题是环境，我把它作为一个转换：

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'
  }
},

好的，咕哝着:dev工作得很好。所以当跑动的时候:戳..。如何设置NODE_ENV：“生产”？我是说，我知道我把“嫉妒”作为一种转变，但是.不知道该怎么用。

在此之后，我还有一个丑陋的任务：

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

因此，在调用grunt:prod之后，它创建了两个文件(bundle.js和bundle-min.js)。在生产中，我只想要bundle.min.js。我知道我能做到：

js/bundle.js'：'js/bundle.js‘

但是我不知道是否有办法把它重命名为bundle.min.js，我想是这样.问题是，在html中，我有：

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

这里是否也有一个让它接受bundle.js或bundle.min.js的诡计？

提前谢谢。

Answer 1

转换是本地的，精心制作的包将它们的转换放在它们的package.json文件中。除非您在中使用envify -您自己的代码--否则您不需要对它做任何事情。

您需要的是格伦特，或者另一种设置环境变量的方法。

下面是使用package.json的另一种选择：

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

这里的好处是，使用您的包的人甚至不需要在全球范围内安装咕噜。npm run build将使用正确的环境变量集运行./node_modules/.bin/grunt build-dev。

Answer 2

约翰?赖利和FakeRainBrigand的回答对我都没有用，对我起作用的是以下几点：

步骤1 -运行这个package.json所在的命令

npm i grunt-env --save-dev

步骤2 --将"evn:“中的代码添加到grunt.initConfig中的Gruntfile.js中，如下所示：

grunt.initConfig({

...

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

...

});

步骤3 -向您的Gruntfile.js中添加grunt任务

grunt.loadNpmTasks('grunt-env');

步骤4 -在浏览器化之前调用它，如下所示：

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

Answer 3

这只是FakeRainBrigand给出的一个很好的答案的补充，如果您在Windows上运行(就像我一样)，那么您需要在scripts部分中使用一种微妙的不同语法：

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