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

我有一个配置文件，其中我有一个变量，可以具有值X或Y取决于它是prod还是dev。在编译时评估条件在babel/webpack

我想在编译时评估它。

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

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

不知道从哪里去！

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

来源

2017-02-03 ahskaus

不知道关于你的问题，你可以只写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) 
})

来源

2017-02-04 04:07:57 CodinCat

看起来像这样。我很惊讶，我没有想到用uglify去除死代码。 – ahskaus

做一个的WebPack配置的发展，并为生产一个配置，你需要哪呢。使用DefinePlugin在每个配置中指定您的变量，然后您可以在您的包中的任何位置引用该全局变量。

来源

2017-02-04 04:11:53

我从来没有使用你提到的插件。但是默认的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 
    ] 
};

所以NODE_ENV从您的环境中，当您运行的WebPack到来。

的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-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) 
);

编译后，如果你看看从上面的REDX例子生成的代码。

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

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

来源

2017-02-04 05:19:30 wayne

谢谢。但在这种情况下，这两种可能性仍然存在于我想避免的编译代码中。我想另一个用户提到使用uglify来删除死代码。 – ahskaus

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

回答

相关问题