Appearance
微应用打包工具 mas-builder
微应用打包工具是在 Vue CLI 工具基础上，针对微应用打包做的封装简化工具，可以让微应用的 vue.config.js 配置文件更简洁。
用法
微应用项目是一个基于 Vue CLI 工具开发的 Vue2 项目，主要配置是根路径下的 vue.config.js 文件
打包工具定义了生产、开发两种模式，生产模式用于打包发布，开发模式用于开发调试。
使用打包工具后，微应用项目的配置文件 vue.config.js 可简化为：
js
const builder = require('mas-builder')
module.exports = builder(process.cwd(), process.env.NODE_ENV, {
/********************
* 生产模式 *
********************/
// 各模式的入口文件
entry: {
app: "./src/web.js",
page: "./src/page.js",
print: "./src/print.js",
mobile: "./src/mobile.js",
"mobile-page": "./src/mobile.js",
},
// 是否压缩代码，默认压缩
minimize: false,
// 设置build时外部获取的库
externals: {
'vue': 'Vue', // key 为在项目中使用的值， value为全局下绑定的对象的key
},
/********************
* 开发模式 *
********************/
// 开发运行的测试页面
pages: {
index: {
entry: 'example/index.js',
}
},
// 设置开发运行时，设置外部获取的库，不设置使用externals信息
// devExternals: {
// 'vue': 'Vue', // key 为在项目中使用的值， value为全局下绑定的对象的key
// },
// 设置开发后端服务代理信息
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8084', // target host
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/api/': '/' // rewrite path
}
}
},
disableHostCheck: true,
contentBase: [
'public',
"../../node_modules",
],
contentBasePublicPath: [
"/",
"/apps/"
]
}
})生产模式
生产模式定义 entry、minimize、externals 三个属性
入口文件
entry 定义了微应用的入口文件，支持5种模式：PC浏览器 app，纯页面 page，打印 print，移动端 mobile，移动纯页面 mobile-page，不同模式用于定义在不同访问模式时，应用的执行入口
key为模式名，值为入口js文件
代码压缩
默认启用代码压缩，当不需要压缩代码时，可将 minimize 设置为 false
外部引用
前端底座默认引入 Vue、Element UI、Vant 2，因此所有项目中使用这三个包时，都需要采用外部引用模式，可通过 externals 节点设置。
key为包名，值为此包在window对象上暴露的名称
开发模式
生产模式定义 pages、devExternals、devServer 三个属性
测试页面
测试页面通过 pages 定义，pages为一个对象，每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
- 每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
- 或一个指定其 entry 的字符串。
外部引用
devExternals 定义开发模式时项目的外部引用，如果和生产模式相同，可以不定义，系统自动使用 externals
开发服务器
开发模式时，可通过 devServer 属性，定义一个有 webpack-dev-server 创建的开发服务器。
当您拥有单独的 API 后端开发服务器并希望在同一域上发送 API 请求时，代理某些 URL 可能很有用。
js
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}当依赖其他微应用代码包在node_modules目录下时，可能需要调整其目录所在位置。
js
contentBase: [
'public',
"../node_modules",
],
contentBasePublicPath: [
"/",
"/apps/"
]