浅谈Webpack下多环境配置的思路_javascript技巧_脚本之家

假设能够将那一个命令更改成后端中好像的打包命令,就很便利了,比方:

/* /build/webpack.dev.conf.js: */plugins: [ new webpack.DefinePlugin({ // 源码中所有 process.env 都会被替换为 // '../config/dev.env'这个module export出来的东西 'process.env': require })]/* /config/dev.env.js */'use strict'const merge = requireconst prodEnv = requiremodule.exports = merge(prodEnv, { NODE_ENV: '"development"'})

1、理想中的多遇到布署

首先在Webpack的官方网址中曾经有过粗略介绍如何安插蒙受变量的文书档案,具体参照他事他说加以考查Webpack
Production。轻松的来讲正是DefinePlugin插件会将大家源码中具有现身的钦点字符串替换为我们提供的对象/字符串,不一样条件的配备文件则放在/config目录下。

在后端开荒中,项目中差别环境对应的参数配置在不一致的安顿文件中。当必要打包基于Maven的Java项目时,平日只要求在卷入命令的末端加上-P参数钦定Profile情况,就能够打包出相应境遇的包,同理前端在接收webpack开采依然打包时只要也能这么做,就能够方便广大。

/* /package.json */"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }

大家的条件布置文件中的内容能够是如此的:

最终在页面上看出的是那样子的:

/* /package.json */"scripts": { "start:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e dev", "start:test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e test", "start:pre": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e pre", "start:prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e prod", "build:dev": "node build/build.js --e dev", "build:test": "node build/build.js --e test", "build:pre": "node build/build.js --e pre", "build:prod": "node build/build.js --e prod", }
/* /src/components/HelloWorld.vue */ import api from '@/api'; data () { return { msg: 'Welcome to Your Vue.js App', env: process.env.NODE_ENV, api1: api.api1, api2: api.api2 } }

由于前后端抽离的前端接纳脱离了后端的支撑,在单独开采前端选择时,页面调节和测量检验时接纳固定的花费条件地址幸而,假诺出以后地点开辟时须要调和分歧蒙受的远端API,大概需求将选拔陈设到分化条件的服务器上时,要是不将这几个景况对应的服务器地址、碰着专属变量等单独布置,或者每趟切换景况都须要修正大气代码。英特网有关那某些的素材非常少,所以上边将以用vue-cli init指令生成的Vue/Webpack品类作为例子,介绍一下自己眼下正在接收的轻便的多情况安顿的思路。

前言

透过yargs能够方便的得到钦点名称的命令行参数,接下去将在看看怎么样利用这些参数实现多文本配置。

一体育工作艺流程下来,我们增添了三个webpack.env.conf.js模块,稍渺小改革了一下vue-cli生成的3个webpack配置文件,并在config目录下增多了逐条蒙受的配备文件,项指标结构是那样子的:

注意:此间想非常说圣元(Nutrilon卡塔尔(قطر‎下的是,vue-cli脚手架帮大家转换好了全方位项目,并且也许有对应webpack.dev.conf.jswebpack.prod.conf.js多个分其他webpack配置文件,但鉴于文件的命名难题(dev.conf.js/prod.conf.js),相当的轻松令人误认为那七个文件正是webpack针对分化碰到的配备。但骨子里那七个公文三个是用以地点调节和测量检验时的铺排文件,另叁个是用于打包陈设的构造文件。调节和测验/打包三种格局与
景况(dev/test/pre/prod等)是足以互相结合的。理论上来说那五个webpack的布局文件笔者觉着应该叫webpack.debug.conf.jswebpack.build.conf.js会更符合一点。

下一场调试/打包的通令依旧用回暗许生成的通令,只不过在命令前面传出景况参数:

美名天下大家得以一贯用那一个插件为大家的多遭逢变量服务。

2、脚本参数化

固然process.argv很有利,但可配置性不高,所以那边用的是yargs,它是node.js中的二个组件,能够透过npm直接设置。===>戳作者查看yargs的api文书档案

/* maven常用打包命令 */mvn clean package -P prod

末段,在大家的Vue组件中就足以很有益的选拔那么些条件安插了:

/* hello.js */console.log('hello ', process.argv[2]);/* 命令行 */$ node ./hello.js tidus//process.argv = ['node', './hello.js', 'tidus']hello tidus

3、引入入国蒙受变量

之所以率先须要缓慢解决的是哪些把参数字传送递到调试/打包的脚本中。

/* /config/test.env.js */'use strict'const merge = requireconst prodEnv = requiremodule.exports = merge(prodEnv, { NODE_ENV: '"test"', API_HOST: '"http://test.xx.com:8080"'})
/* /build/webpack.base.conf.js */// 引入上面的webpack.env.conf模块const envConfig = requiremodule.exports = { ... , // 配置DefinePlugin插件 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': envConfig }) ], ...}

接下来大家就足以在源码中应用process.env.NODE_ENV来收获我们配备的情状变量的值,以至足以独自抽离二个api模块:

以上正是本文的全体内容,希望对大家的就学抱有利于,也期待我们多都赐教脚本之家。

4、总结

node.js中传递参数到脚本中,有多种办法,举例利用process.argv

/* 改造后的命令,只是打个比方,实际并不一定是这样 */"scripts": { "start:dev": "npm run dev -P dev", "build:test": "node build/build.js -P test" }/* 命令行 */$ npm run start:dev //本地调试,开发环境$ npm run build:test //打包,测试环境
/* /src/api/index.js */const API_HOST = process.env.API_HOST;export default { api1: `${API_HOST}/path/to/api1`, api2: `${API_HOST}/path/to/api2`}

接下去要将动态加载的蒙受文件丢到webpack的配备文件中,由于webpack.dev.conf.jswebpack.prod.conf.js都以一连自webpack.base.conf.js,所以大家一贯改写wepack.base.conf.js的插件配置部分,直接抬高DefinePlugin插件的铺排,并去掉原配置文件该插件的配置:

/* /build/webpack.env.conf.js */// 定义参数配置const argv = require.argv;// 获取环境变量const env = argv.e;process.stdout.write('the env is '+ env +'n');// require指定的环境配置文件const envConfigFile = "../config/" + env + ".env.js";process.stdout.write('the env config file is '+ envConfigFile +'n');// 将require的配置文件原封不动export回出去module.exports = require;

大家能够通过下边传出到脚本中的情形参数,动态加载分化条件的安排文件,以高达切换蒙受的指标。动态加载不相同安顿境遇的代码:

而在前端项目中,调节和测量试验与包装命令vue-cli init曾经为大家在package.json中生成好了。

$ npm install yargs --dev --save/* hello.js */const argv = require.argv;console.log;/* 命令行 */$ node ./hello.js --env testhello test

发表评论

电子邮件地址不会被公开。 必填项已用*标注