React和Grunt - Envify NODE_ENV ='production'和UglifyJS [英] React and Grunt - Envify NODE_ENV='production' and UglifyJS

问题描述

我正在使用 Grunt 构建React项目，并希望拥有'dev'和'prod'风味。正如反应文档所述：

要在生产模式下使用React，请将环境变量NODE_ENV设置为生产。
建议使用UglifyJS来执行死代码清除工作，如果您完全删除开发模式中存在的额外代码，建议使用
。

我非常喜欢使用grunt，browserify和东西，但让我们拭目以待。我遇到的第一个问题是envify，我将它用作转换：

  browserify：{
 options：{
 transform：['reactify']，
 extensions：['.jsx'] 
}，
 dev：{
 options：{
 watch：true //使用watchify（更快）
}，
 src：['js / app.js']，
 dest：'js / bundle.js'
}，
 / ** 
 *要在生产模式下使用React，请将环境变量NODE_ENV设置为生产。 
 *执行死代码消除的缩小器（如UglifyJS）建议为
 *，以完全删除开发模式中存在的额外代码。 
 ** / 
 prod：{
 options：{
 transform：['envify'] //如何设置NOD_ENV ='production'？ 
}，
 src：['js / app.js']，
 dest：'js / bundle.js'
} 
}，
  

好的，做grunt：dev工作得很好。所以当运行grunt：prod ...我如何设置NODE_ENV：'production'？我的意思是，我知道我通过'envify'作为转换，但是......不知道如何使用它。

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

  uglify：{
 prod：{
文件：{
'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吗？

预先感谢。

解决方案

转换是本地的，制作的软件包将它们的变换放在它们的package.json文件中。除非您在自己的代码中使用envify，否则您无需对其执行任何操作。

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

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

  {
脚本：{
build：NODE_ENV =开发grunt build-dev，
dist：NODE_ENV =生产grunt dist
} 
 }，
devDependencies：{
grunt：...，
grunt-cli：...
} 
  

这里的好处是使用你的包的人甚至不需要全局安装grunt。 npm run build 将运行 ./ node_modules / .bin / grunt build-dev ，并设置正确的环境变量。 / p>

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

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.

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:

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.

After this, I also have an uglify task:

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:

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:

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

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

Thanks in advance.

解决方案

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.

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

Here's an alternative by using 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.

这篇关于React和Grunt - Envify NODE_ENV ='production'和UglifyJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！