Question

我有一个配置文件，其中我有一个变量，其值X或Y取决于它是prod还是dev。

我想在编译时对它进行评估。

我能够从babel-plugin-transform-node-env-inline获取NODE_ENV值，但无法弄清楚如何评估表达式。我尝试了babel-plugin-transform-conditionals但它会抛出奇怪的代码错误。错误不存在。

我可以在运行时进行评估，因为在这种情况下，prod和dev值都可以在app.js中使用，这是我不能拥有的。

不知道从哪里开始!!

任何完全不同的解决方案也会起作用（比如以某种方式编译一个不同的文件），但不知道如何去做。

Answer 1

不确定您的问题，您可以像这样编写if语句

if (process.env.NODE_ENV === 'development') {
  // ...
}

它将转换为

// or true
if (false) {
  // ...
}

如果它是false，那么这是一种无法访问的代码，它会被UglifyJs插件自动剥离（在你的webpack配置中使用new webpack.optimize.UglifyJsPlugin()）

也不要忘记使用DefinePlugin（和cross-env如果您使用的是Windows）来声明process.env.NODE_ENV变量，或者它可能不起作用

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})

Answer 2

我从未使用过你提到过的插件。但默认的webpack设置应该像我在下面所做的那样工作：

<强> webpack.config.js

var config = {
  entry: {
    ...
  },
  output: {
    ...
  },
  module: {
    ...
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      }
    }),
    // some other plugins
  ]
};

因此，当您运行webpack时，NODE_ENV将来自您的环境。

<强>的package.json

{
  "scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --hot --inline --colors --host 0.0.0.0 --port 9999",
    "production": "NODE_ENV=production webpack",
  }
}

在你的package.json中，在你指定的环境中运行webpack。

您的config.js

export default {
  isDebug: process.env.NODE_ENV === "development",
  logLevel: process.env.NODE_ENV === "development" ? "error" : "info"
};

我在我的redux应用程序中使用的另一个例子。我只想在开发过程中使用redux-logger。

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import promise from "redux-promise-middleware";
import reducer from "./reducers";

const middleware = process.env.NODE_ENV === "production" ? [promise(), thunk] : [promise(), thunk, logger()];

export default createStore(
  reducer,
  applyMiddleware(...middleware)
);

编译后如果查看上面的redux示例生成的代码。

var middleware =  true ? [(0, _reduxPromiseMiddleware2.default)(), _reduxThunk2.default] : [(0, _reduxPromiseMiddleware2.default)(), _reduxThunk2.default, (0, _reduxLogger2.default)()];

process.env.NODE_ENV === "production"已评估为true。

Answer 3

制作一个用于开发的Webpack配置，以及一个用于生产的配置，无论如何。使用DefinePlugin在每个配置中指定变量，然后您可以在捆绑包中的任何位置引用该全局变量。

在babel / webpack中编译时评估条件

3 个答案: