React和Grunt – Envify NODE_ENV ='production'和UglifyJS
我正在使用Grunt构build一个React项目，我想要“dev”和“prod”风味。 正如反应文件所说：
要在生产模式下使用React，请将环境variablesNODE_ENV设置为生产。 build议使用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：'生产'？ 我的意思是，我知道我正在通过'envify'作为转换，但是…不知道如何使用它。
在此之后，我也有一个丑陋的任务：
uglify: { prod: { files: { 'js/bundle.min.js': ['js/bundle.js'] } } }
所以在调用grunt：prod之后，它创build的是两个文件（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吗？
提前致谢。
转换是本地的，制作精良的包把它们的转换放在package.json文件中。 除非你在自己的代码中使用envify，否则你不需要做任何事情。
你需要的是grunt-env ，或者设置环境variables的另一种方法。
下面是使用package.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 ，并设置正确的环境variables。
John Reilly和FakeRainBrigand的答案都不适合我。 对我有效的是以下几点：
第1步 – 在package.json所在的位置运行此命令
npm i grunt-env --save-dev
第2步 – 将“evn：”中的代码添加到grunt.initConfig中的Gruntfile.js中，如下所示：
grunt.initConfig({ ... env: { prod: { NODE_ENV: 'production' } }, ... });
第3步 – 将grunt任务添加到您的Gruntfile.js
grunt.loadNpmTasks('grunt-env');
第4步 – 在浏览器之前调用它，如下所示：
grunt.registerTask("default", ["env", "browserify"]);
除了FakeRainBrigand的优秀答案之外，如果你在Windows上运行（像我一样），那么你的scripts部分需要一个细微差别的语法：
{ "scripts": { "build": "SET NODE_ENV=development&&grunt build-dev", "dist": "SET NODE_ENV=production&&grunt dist" } }, "devDependencies": { "grunt": "...", "grunt-cli": "..." }