为了账号安全,请及时绑定邮箱和手机立即绑定

在webpack中传递环境因变量

/ 猿问

在webpack中传递环境因变量

牧羊人nacy 2019-09-02 13:04:01

在webpack中传递环境因变量

我正在尝试将一个角度很大的应用程序从GUP转换为WebPack。在GULP中,根据node_env的不同,我使用glp预处理来替换html页面中的一些变量(例如数据库名)。用WebPack实现类似结果的最佳方法是什么?



查看完整描述

3 回答

?
天天世纪

实现这一目标有两种基本方法。

DefinePlugin

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

请注意,这将只替换匹配的“原样”。这就是为什么字符串采用它的格式。你可以有一个更复杂的结构,比如一个物体,但是你明白了。

环境插件

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin使用DefinePlugin内部,并将环境值映射为代码。简洁的语法。

化名

或者,您可以通过别名模块..从消费者的角度来看,它应该是这样的:

var config = require('config');

配置本身可以如下所示:

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }}

比方说process.env.NODE_ENVdevelopment..它会映射到./config/development.js然后。它映射到的模块可以像这样导出配置:

module.exports = {
    testing: 'something',
    ...};



查看完整回答
反对 回复 2019-09-03
?
波斯汪


只是另一个选项,如果您只想使用cli接口,只需使用define可供选择的网页包。我在我的package.json :

"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

所以我只能跑了npm run build-production.


查看完整回答
反对 回复 2019-09-03
?
沧海一幻觉

我研究了几个关于如何设置特定于环境的变量的选项,最后得出如下结论:

我现在有两个网络包吐露:

webPack.production.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }}),

webpac.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('development'),
    'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
  }}),

在我的代码中,我以如下方式获得api_URL的值:

const apiUrl = process.env.API_URL;

Webpack文档有一个例子:https:/webpac.js.org/plugins/Define-plugin/#use

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")})

带着ESLINT您需要在代码中特别允许未定义的变量,如果您有no-undef规则生效。http://eslint.org/docs/rules/no-undef就像这样:

/*global TWO*/console.log('Running App version ' + TWO);

编辑2017年9月7日(创建-反应-应用程序专用)

如果您不太喜欢配置,请查看Crea-ReactiveApp:创建-反应-应用程序-添加自定义环境变量..在引擎盖下,CRA无论如何都使用WebPack。




查看完整回答
反对 回复 2019-09-03

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信