bagua-cli
v0.2.22
Published
[文档说明](https://www.yuque.com/docs/share/83cf0e1b-157c-46e4-9cbe-f6161816a8c6?#) 基于 webpack5 的联邦模块,微前端方案
Downloads
156
Readme
bagua-cli
文档说明 基于 webpack5 的联邦模块,微前端方案
动机(相对于 vcmqj)
安装
npm i bagua-cli -g
目录配置
├─.bagua.js //项目配置
├─.babelrc //babel配置
├─.eslintrc.js //eslint配置
├─.gitignore
├─README.md
├─index.html //通用模板
├─package.json
├─static // 不需要变异的静态资源
├─src
| ├─index.css
| ├─index.js //入口
| ├─widgets //业务组建
| ├─views //page组件
| ├─router //路由
| ├─components //通用组件
├─mocker
| ├─data //不分环境的公共配置,启动必会运行的配置
| ├─default.js //mocker数据请求代理
| ├─st1.js //mocker数据
使用方式
// 创建基本项目
bagua-cli create [项目名称]
// 创建项目某个模块
bagua-cli createmodel [项目包名称]
// 开发环境
// 所运行环境可从.bagua.js里面配置
bagua-cli -s [各个包下的package.json的scripts命令对应起来] // bagua-cli -s start 执行的是各个包下的npm run start命令
bagua-cli -d [运行环境] // 如st
// 生产环境
vcmqj -p [各个包下的package.json的scripts命令对应起来]// bagua-cli -p build 执行的是各个包下的npm run build命令
vcmqj -b [生产环境] // 如st
// 其他命令 -h查看
.bagua.js 的配置
// 可自定义配置webpack属性
const path = require('path');
const webpack = require('webpack');
module.exports = {
name: 'common',
autoOpen: true, // 是否自动打开浏览器
staticDir: '/static/demo', // 以serverDir为base,静态资源目录
viewDir: '/view', // 以serverDir为base,index.html目录
serverDir: './output', // 输出目录
isModuleFederation: false, //判断是否是模块联邦模式的项目
serverTemplatePort: '3000', // html服务启动端口,模拟真实服务器
serverStaticPort: '8080', // 静态资源服务启动端口,模拟真实服务器
staticDir: 'output/static', // 静态资源服务启动目录,模拟真实服务器
tmpDir: 'output/view', // html服务启动目录,模拟真实服务器
shared: {
vue: { singleton: true },
'vue-router': { singleton: true },
'ant-design-vue': { singleton: true },
},
// library: { type: "var", name: "common" },
dev: {
st1: {
devServer: {
proxy: {
'/api': {
target: 'http://st1-api.mingqijia.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
},
default: {
port: '3001',
nomocker: true,
filename: `${VERSION}.remoteEntry.js`,
remotes: {
asst: `asst@//localhost:3004/${VERSION}.remoteEntry.js`,
},
exposes: {
'./util': path.resolve(__dirname, 'src/util'),
},
output: {
// publicPath: '//10.110.2.76:3001/',
publicPath: '//localhost:3001/',
},
plugins: [
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
PROD_ENV: JSON.stringify(process.env.PROD_ENV),
}),
],
},
},
prod: {
prod: {
remotes: {
asst: `asst@//static-h5.towngasvcc.com/asst/asst/js/${VERSION}.remoteEntry.js?v=${VERSION}`,
},
output: {
publicPath: '//static-h5.towngasvcc.com/asst/',
},
},
pre: {
remotes: {
asst: `asst@//pre-static.mingqijia.com/asst/asst/js/${VERSION}.remoteEntry.js?v=${VERSION}`,
},
output: {
publicPath: '//pre-static.mingqijia.com/asst/',
},
},
st1: {
remotes: {
asst: `asst@//st1-static.mingqijia.com/asst/asst/js/${VERSION}.remoteEntry.js?v=${VERSION}`,
},
output: {
publicPath: '//st1-static.mingqijia.com/asst/',
},
},
local: {
remotes: {
asst: `asst@//localhost:8080/asst/asst/js/${VERSION}.remoteEntry.js?v=${VERSION}`,
},
},
default: {
filename: `common/js/${VERSION}.remoteEntry.js`,
exposes: {
'./util': path.resolve(__dirname, 'src/util'),
'./components': path.resolve(__dirname, 'src/components'),
},
output: {
publicPath: '//localhost:8080/asst/',
},
plugins: [
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
PROD_ENV: JSON.stringify(process.env.PROD_ENV),
}),
],
},
},
};