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

时间:2024-01-27 07:27:29

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

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

webpack.png 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