webpack正式、测试环境接口地址本地运行及打包命令配置

声明：本文由w3h5原创，转载请注明出处：《webpack正式、测试环境接口地址本地运行及打包命令配置》 https://www.w3h5.com/post/521.html

为了方便开发，节省接口地址修改维护时间，可以通过 webpack 配置，区分正式、测试环境。

可以方便的通过一个命令或者参数，运行或者连接不同环境的接口地址：

# 本地运行测试环境
npm run dev

# 本地运行正式环境 
npm run prod

# 测试环境打包
npm run build

# 正式环境打包
npm run build prod

先了解几个概念：

process.argv ：

process 对象是一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。 因为是全局变量，所以无需使用 require()。

process.argv 属性返回一个数组，这个数组包含了启动 Node.js 进程时的命令行参数。

其中：

数组的第一个元素 process.argv[0] 返回启动 Node.js 进程的可执行文件所在的绝对路径。

第二个元素 process.argv[1] 为当前执行的 JavaScript 文件路径。

剩余的元素为其他命令行参数。

例如运行：

node process-args.js one two=three four

此时：

process.argv = ['/usr/local/bin/node', '<path>process-args.js', 'one', 'two=three', 'four']

webpack 也同样支持 argv 参数，在 package.json 中配置命令：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
  },

我们就可以从 process.argv[4] 拿到 "--env=prod" 这个参数。

打印出来的效果如下：

# process.argv

[ '/usr/local/bin/node',
  '/www/w3h5/node_modules/.bin/webpack',
  '--inline',
  '--progress',
  '--env=prod',
  '--config' ]

配置方法：

首先修改 webpack 的配置文件， /config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

let params = process.argv[4]
let baseUrl = ''

switch (params) {
  case '--env=prod': //正式环境地址
    baseUrl = '"https://api.w3h5.com/"',//首页地址
    break
  default: //测试环境地址
    baseUrl = '"http://api-test.w3h5.com/"',//首页地址
}

module.exports = merge(prodEnv, {//process.env.HOME_URL
  NODE_ENV: '"development"',
  HOME_URL: baseUrl,//首页地址
})

先声明一个变量 params ，然后将 --env=prod （代表正式环境）赋值给它。

使用 switch case 语句进行判断，如果有这个代表正式环境的参数，则使用正式环境的地址。如果没有这个参数，则默认走测试环境。

然后将 HOME_URL 变量用 module.exports 导出。

这样就可以通过 npm 命令来区分运行正式还是测试环境了。

# 测试环境
npm run dev

# 正式环境
npm run prod

打包命令配置：

和上面一样，修改  /config/prod.evn.js 文件：

'use strict'

let params = process.argv[2]
let baseUrl = ''

switch (params) {
  case 'prod': //正式环境地址
    baseUrl = '"https://api.w3h5.com/"',//首页地址
    break
  default: //测试环境地址
    baseUrl = '"http://api-test.w3h5.com/"',//首页地址
}

module.exports = merge(prodEnv, {//process.env.HOME_URL
  NODE_ENV: '"production"',
  HOME_URL: baseUrl,//首页地址
})

细心的朋友可能会注意到，这里给 params 赋得值是 process.argv[2] ，可以看一下 package.json 中配置的命令：

"scripts": {
  "build": "node build/build.js"
},

因为 build 命令只有两个参数，执行下面的命令，就可以将第三个参数 prod 带过去：

# 测试环境打包
npm run build 

# 正式环境打包
npm run build prod

前端直接调用

项目运行后，前端就可以直接用 process.env.HOME_URL 获取到首页的地址了。

测试环境会显示：http://api-test.w3h5.com/

正式环境就是：https://api.w3h5.com/

什么是 process.env ：

通常情况下，我们需要针对不同环境（开发环境、集成环境、生产环境等），进行相应策略的打包（比如是否替换接口地址，代码是否压缩等）。webpack 就是通过 process.env 属性加以区分。

webpack 是 npm 生态中的一个模块，webpack 运行依赖于 node 环境。这里的 process.env 是Nodejs提供的一个API，它返回一个包含用户环境信息的对象。

如果我们给 Nodejs 设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断。

process.env 属性返回一个对象，包含了当前 Shell 的所有环境变量。比如，process.env.HOME 返回用户的主目录。

通常的做法是，新建一个环境变量 NODE_ENV ，用它确定当前所处的开发阶段，生产阶段设为 production ，开发阶段设为 development 或 testing ，然后在脚本中读取 process.env.NODE_ENV 即可。

要说明的是，NODE_ENV 这个名称只是开发社区的一种共识，名称内容是可以修改的。如果需要，你也可以把它定义为 NODE_abc 或者 xxx 都行。

参考文献：

http://nodejs.cn/api/process.html#process_process_argv

https://www.jianshu.com/p/19d199f93045