React和Grunt - Envify NODE_ENV ='production'和UglifyJS

I am using Grunt to build a React project and I want to have 'dev' and 'prod' flavours. As react docs says:

我正在使用Grunt构建一个React项目，我想要'dev'和'prod'的味道。正如反应文档所说：

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.

要在生产模式下使用React，请将环境变量NODE_ENV设置为production。建议使用UglifyJS执行死代码消除的minifier，以完全删除开发模式中存在的额外代码。

I am very new using grunt, browserify and stuff but let's see. First problem I have is with envify, I use it as a transform:

我是非常新的使用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'
  }
},

Ok, doing grunt:dev works just fine. So when running grunt:prod... How can I set NODE_ENV: 'production'? I mean, I know I am passing 'envify' as a transform but... No idea how to use that.

好吧，做咕噜：开发工作得很好。所以当运行grunt：prod ...我怎样才能设置NODE_ENV：'生产'？我的意思是，我知道我正在通过'envify'作为转换，但......不知道如何使用它。

After this, I also have an uglify task:

在此之后，我还有一个uglify任务：

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

So after calling grunt:prod, what it creates is two files (bundle.js and bundle-min.js). In production I will like to only have bundle.min.js. I know I can do:

所以在调用grunt：prod后，它创建的是两个文件（bundle.js和bundle-min.js）。在制作中我想只有bundle.min.js。我知道我能做到：

js/bundle.js': ['js/bundle.js']

js / bundle.js'：['js / bundle.js']

But mmm I don't know if there is a way to just rename it to bundle.min.js, I guess so... the problem is that in the html I have:

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

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

Is there here also a trick to make it accepts either bundle.js or bundle.min.js?

在这里还有一个技巧，使它接受bundle.js或bundle.min.js？

Thanks in advance.

提前致谢。

3 个解决方案

#1

Transforms are local, and well made packages put their transforms in their package.json file. Unless you're using envify in your own code, you don't need to do anything with it.

转换是本地的，并且制作精良的包将它们的转换放在它们的package.json文件中。除非您在自己的代码中使用envify，否则不需要对其进行任何操作。

What you do need is grunt-env, or another way to set environmental variables.

你需要的是grunt-env，或者设置环境变量的另一种方式。

Here's an alternative by using package.json:

这是使用package.json的替代方法：

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

The benefit here is that the person using your package doesn't even need to install grunt globally. npm run build will run ./node_modules/.bin/grunt build-dev with the correct environmental variable set.

这样做的好处是使用您的包的人甚至不需要全局安装grunt。 npm run build将使用正确的环境变量集运行./node_modules/.bin/grunt build-dev。

#2

Both John Reilly's and FakeRainBrigand 's answers did not work for me. What worked for me was the following:

John Reilly和FakeRainBrigand的答案都不适合我。对我有用的是：

Step 1 - Run this command where your package.json is

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

npm i grunt-env --save-dev

Step 2 - Add the code in "evn:" to your Gruntfile.js within grunt.initConfig like so:

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

grunt.initConfig({

...

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

...

});

Step 3 - Add the grunt task to your Gruntfile.js

第3步 - 将grunt任务添加到Gruntfile.js

grunt.loadNpmTasks('grunt-env');

Step 4 - Call it before browserify like so:

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

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

#3

Just an addition to the great answer by FakeRainBrigand, if you're running on Windows (like me) then you need a subtly different syntax in your scripts section:

只是FakeRainBrigand给出了很好的答案，如果你在Windows上运行（像我一样），那么你的脚本部分需要一个略有不同的语法：

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

#1