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

IT技术 javascript node.js gruntjs reactjs browserify
2021-05-08 23:42:01

我正在使用Grunt构建一个 React 项目，并且我想要“开发”和“生产”风格。正如react文档所说：

要在生产模式下使用 React，请将环境变量 NODE_ENV 设置为生产。建议使用 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: {
 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吗？

提前致谢。

3个回答

变换是本地的，制作精良的包将它们的变换放在它们的 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使用正确的环境变量集运行。

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 步- 在 browserify 之前调用它，如下所示：

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": "..."
}
其它你可能感兴趣的问题
上一篇为什么要填充 STL 的这个中心区域？ 下一篇在typescript中使用 react-redux connect