Question

我正在使用 Grunt 来构建一个React项目，我希望有一个＆＃39; dev＆＃39;和＆＃39; prod＆＃39;口味。正如反应文档所说：

要在生产模式下使用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：＆＃39; production＆＃39 ;?我的意思是，我知道我正在过去＆＃39; envify＆＃39;作为一种转变，但......不知道如何使用它。

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

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

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

js / bundle.js＆＃39;：[＆＃39; js / bundle.js＆＃39;]

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

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

这里还有一个技巧让它接受bundle.js或bundle.min.js吗？

提前致谢。

Answer 1

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

您需要的是grunt-env，或其他设置环境变量的方法。

以下是使用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。

Answer 2

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

第1步 - 运行此命令，其中package.json为

npm i grunt-env --save-dev

第2步 - 在＆＃34; evn：＆＃34;中添加代码到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"]);

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

2 个答案: