Javascript 在Web包中传递环境因变量_Javascript_Webpack

Javascript 在Web包中传递环境因变量

javascript webpack

Javascript 在Web包中传递环境因变量,javascript,webpack,Javascript,Webpack,我正在尝试将一个有角度的应用程序从gulp转换为webpack。在gulp中，我使用gulp preprocess替换html页面中的一些变量（例如，数据库名称），具体取决于节点_ENV。使用webpack获得类似结果的最佳方法是什么？有两种基本方法定义插件 new webpack.DefinePlugin({ 'process.env.NODE_env'：JSON.stringify（process.env.NODE_env | |'development'） }), 请注意，这将仅替换匹

我正在尝试将一个有角度的应用程序从gulp转换为webpack。在gulp中，我使用gulp preprocess替换html页面中的一些变量（例如，数据库名称），具体取决于节点_ENV。使用webpack获得类似结果的最佳方法是什么？

有两种基本方法

定义插件

new webpack.DefinePlugin({
'process.env.NODE_env'：JSON.stringify（process.env.NODE_env | |'development'）
}),

请注意，这将仅替换匹配项“原样”。这就是为什么字符串的格式是这样的。你可以有一个更复杂的结构，比如一个物体，但是你知道了

环境插件

newwebpack.EnvironmentPlugin（['NODE\u ENV']））

EnvironmentPlugin

在内部使用

DefinePlugin

，并通过它将环境值映射到代码中。简洁的语法

别名或者，您可以通过使用配置。从消费者的角度来看，它是这样的：

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

var config=require（'config'）；

配置本身可能如下所示：

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

解析：{
别名：{
config:path.join（\uuu dirname，'config'，process.env.NODE\u env）
}
}

假设

process.env.NODE\u env

是

development

。然后它会映射到

/config/development.js

。它映射到的模块可以导出如下配置：

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

module.exports={
测试：“某物”，
...
};

只是另一个选项，如果您只想使用cli界面，只需使用webpack的

定义

选项即可。我在我的

包.json中添加了以下脚本：
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

因此，我只需运行npm run build production
就可以直接使用网页中可用的在传输过程中访问任何环境变量
您只需在webpack.config.js
文件中声明插件：
var webpack=require（'webpack'）；
module.exports={
/* ... */
插件=[
新的webpack.EnvironmentPlugin（['NODE\u ENV']））
]
};

请注意，您必须明确声明要使用的环境变量的名称。
我研究了几个关于如何设置环境特定变量的选项，最后得出以下结论：
我目前有2个网页包配置：
webpack.production.config.js
new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }
}),

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

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

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

在我的代码中，我通过以下（简单）方式获得API_URL的值：
const apirl=process.env.API\u URL
编辑2016年11月3日
Webpack docs有一个例子：
使用ESLint时，如果启用了no undef
规则，则需要特别允许代码中存在未定义的变量。像这样：
/*global TWO*/
console.log('Running App version ' + TWO);

编辑2017年9月7日（创建特定于React的应用程序）
如果您不想配置太多，请查看CreateReact应用程序：。在幕后，CRA无论如何都会使用Webpack。
为了增加我个人的答案，我更喜欢以下内容：
const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: prod? `"production"`: '"development"'
        }
      }
    }),
    ...
  ]
};

使用这种方法，就不会有任何时髦的env变量或跨平台问题（使用env变量）。您只需分别为开发或生产运行正常的webpack
或webpack-p

参考：
您可以使用--env
传递任何命令行参数，而无需附加插件，因为webpack 2：
webpack --config webpack.config.js --env.foo=bar

使用webpack.config.js中的变量：
module.exports = function(env) {
    if (env.foo === 'bar') {
        // do something
    }
}

要添加到一堆答案中：
使用扩展的DefinePlugin而不是DefinePlugin
npm install extended-define-webpack-plugin --save-dev.

ExtendedDefinitePlugin使用起来更简单，并且有文档记录：-）

因为DefinePlugin缺乏好的文档，我想帮忙，说它实际上像#DEFINE in c#一样工作
#if (DEBUG)
        Console.WriteLine("Debugging is enabled.");
#endif

因此，如果您想了解DefinePlugin是如何工作的，请阅读c###define doucmentation
 我更喜欢为不同的环境使用.env文件
使用webpack.dev.config将env.dev
to.env复制到根文件夹中
使用webpack.prod.config将env.prod
复制到.env
和代码
使用
require（'dotenv'）.config（）；
const API=process.env.API###，它将存储.env文件中的值
由于我对的编辑未获得批准，因此发布了其他信息
如果您想从package.json中选取值，就像一个定义的版本号一样，并通过Javascript内部的DefinePlugin访问它
{"version": "0.0.1"}

然后，在相应的webpack.config中导入package.json，使用导入变量访问属性，然后使用定义插件中的属性
const PACKAGE = require('../package.json');
const _version = PACKAGE.version;//Picks the version number from package.json

例如，webpack.config上的某些配置正在使用元数据定义Plugin：
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR,
  RELEASE_VERSION:_version//Version attribute retrieved from package.json
});

new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'process.env': {
          'ENV': JSON.stringify(METADATA.ENV),
          'NODE_ENV': JSON.stringify(METADATA.ENV),
          'HMR': METADATA.HMR,
          'VERSION': JSON.stringify(METADATA.RELEASE_VERSION)//Setting it for the Scripts usage.
        }
      }),

在任何typescript文件中访问此文件：
this.versionNumber = process.env.VERSION;

最聪明的方法如下：
// webpack.config.js
plugins: [
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(require("./package.json").version)
    })
  ]

这只是另一个与@zer0chain的答案类似的答案。然而，有一个区别
设置webpack-p就足够了。
这与：
--define process.env.NODE_ENV="production"

这和
// webpack.config.js
const webpack = require('webpack');

module.exports = {
  //...

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

因此，您可能只需要在package.json
节点文件中使用类似的内容：
{
  "name": "projectname",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "webpack -d",
    "production": "webpack -p"
  },
  "author": "prosti",
  "license": "ISC",
  "dependencies": {    
    "webpack": "^2.2.1",
    ...
  }
}


以下是网站上的一些提示：
DefinePlugin允许您创建可在编译时配置的全局常量。这对于允许开发构建和发布构建之间的不同行为非常有用。例如，您可以使用全局常量来确定是否进行日志记录；也许您在开发构建中执行日志记录，但不在发布构建中执行日志记录。这就是DefinePlugin所促进的场景

这样您就可以检查是否键入webpack--help

Config options:
  --config  Path to the config file
                         [string] [default: webpack.config.js or webpackfile.js]
  --env     Enviroment passed to the config, when it is a function

Basic options:
  --context    The root directory for resolving entry point and stats
                                       [string] [default: The current directory]
  --entry      The entry point                                          [string]
  --watch, -w  Watch the filesystem for changes                        [boolean]
  --debug      Switch loaders to debug mode                            [boolean]
  --devtool    Enable devtool for better debugging experience (Example:
               --devtool eval-cheap-module-source-map)                  [string]
  -d           shortcut for --debug --devtool eval-cheap-module-source-map
               --output-pathinfo                                       [boolean]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production" 

                      [boolean]
  --progress   Print compilation progress in percentage                [boolean]

我发现以下解决方案最容易为WebPC设置环境变量
//package.json
{
...
 "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
}

 // webpack.config.json
 module.exports = (env,argv) => {
        return {
           ...
           externals: {
            // global app config object
            config: JSON.stringify({
                apiUrl: (argv.mode==="production") ? '/api' : 'localhost:3002/api'
            })
        }
}

// my api service
import config from 'config';
console.log(config.apiUrl) // like fetch(`${config.apiUrl}/users/user-login`)

API_URL='dev_url/api/'