在編譯時評估條件在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

回答

相關問題