javascript - Typescript/Webpack 检查是否通过生产配置运行

Question

我正在使用webpack、reactjs、typescript。在我的 .tsx 代码中，我有一个要求，需要根据我的环境(即生产或开发)路由到 URL。那么，如何检查环境并动态加载正确的 URL？

Answer 1

您可以添加一个插件来定义可以在代码中访问的环境变量，如下所示:

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

然后在代码中，您只需检查 process.env.NODE_ENV。

不用说，您可以使用可以通过 cli 传递的环境变量来管理插件，如下所示:

webpack --env.production

然后让你的 webpack.config.js 具有如下内容:

module.exports = function(env) {
    return {
        /*[...]*/
        plugins: [new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(env.production ? 'production' : 'development')
        })]
        /*[...]*/
    };
};

来源:这就是 React 的工作原理 :-)