mass-build-runtime-setting

前言

· 此工具主要是在devops流程中根据需要构建不同的运行配置文件， devops默认先执行npm run build 构建， 再根据是否有构建变量进行带有构建变量的构建如npm run build:UAT (UAT即你在devops配置的构建参数)

. 解决devops中区分环境打包太慢的问题

. 为将来的的配置平台打基础， 以后有了配置平台，这个生成配置将在配置平台动态生成

. 此工具支持本地开发运行， 仅需要在WebpackPreSetting插件中传递{ dev: true }, 将启动本地开发模式

集成

npm i mass-build-runtime-setting -D

在vueConfig中加入

const massBuildRuntimeSetting = require('mass-build-runtime-setting')

`config.plugins.push(new massBuildRuntimeSetting.WebpackPreSetting({

dev: Boolean // 是否是本地开发, 

prod: '', //可选配置, 配置了这个参数就可以不用在 build 后面执行 MBRSetting --mode prod, 此参数仅在dev为false有效果

soures: {'index.html': [] }, // 手动注入额外的资源 eg: ['/static/js/tool.js'], 可用于public中不参与构建的资源却想走CDN时， 注意的是该资源内如果存在相对路径来应用资源将不会走cdn, 因为本插件不会扫描注入的路径参数;index.html为你的输出的html名字， 一般为index.html, 即本插件支持多html构建, 'all' 是一个特殊的值， 表示无轮构建多个html, 此资源全部参与cdn构建eg: { 'all': [...资源]}

})) `

将你的构建配置改为如下

区分环境

【

 // 二选一

"build": "vue-cli-service build --report && MBRSetting --mode prod" // 没有配置prod

"build": "vue-cli-service build --report" // 配置了WebpackPreSetting的prod

】

"build:SIT": "MBRSetting --mode sit"

"build:UAT": "MBRSetting --mode uat"

"build:PRE": "MBRSetting --mode stage"

不区分环境

【

 // 二选一

"build": "vue-cli-service build --report && MBRSetting --mode prod" // 没有配置prod

"build": "vue-cli-service build --report" // 配置了WebpackPreSetting的prod

】

如项目对接了CDN, 在入口文件加入 webpack_public_path = window[settingName].cdn (settingName 默认 massBuildRuntimeSetting 即 webpack_public_path = window['massBuildRuntimeSetting'].cdn);

如需要更改默认配置 可在项目根目录下新建massBulildSetting.[env].json (eg: massBulildSetting.uat.json, massBulildSetting.pre.json)

test unit

在tests下新建 jest.setup.js 并写下如下内容

import { buildUserSetting } from 'mass-build-runtime-setting/lib/utils'

window['massBuildRuntimeSetting'] = buildUserSetting('dev').setting

在jest.config.js中加入 setupFilesAfterEnv: ['/tests/jest.setup.js']

参数

{

cdn: '', // 需要通过cdn发布必须配置

settingInHtml: false, // 配置文件是否直接写入html

settingName: 'massBuildRuntimeSetting', // 默认massBuildRuntimeSetting， 挂载到window的名字

settingUseCdn: false, // 生成setting文件是否走CDN

pre: false, // 是否支持preload, preFetch

...other // 其他配置直接合并到运行时setting

}

result:

window[settingName] = { ...setting }

NOTE

启用了此工具你的业务代码不应该含有process.env.*

最多可以有一个process.env.NODE_ENV来区分部署环境与本地开发, 但还是建议统一从setting里面获取

在你的.gitignore 加入massMakeing， massMakeing文件夹是构建生成的临时文件

本地开发cdn配置不会起作用