webpack4编译套件
npm install feflow-devkit-xbc-webpack4- 使用webpack4 + babel7 最新的构建解决方案
- 支持React,Vue的编译运行
- 目前支持多个环境配置(dev, test,formalTest,demo, prod )
先通过 cnpm 安装 feflow 开始.
```
cnpm install @feflow/cli -g
在项目根目录添加 feflow.json 或者 feflow.js 配置文件
`js`
{
"devkit": {
"commands": {
"dev": {
"builder": "feflow-devkit-xbc-webpack4:dev",
"options": { // 配置单独配置 配置项参考下面公用配置项
"isMinicss": false,
"port": 8013
}
},
"test": {
"builder": "feflow-devkit-xbc-webpack4:test",
"options": {
"isMinicss": true
}
},
"formalTest": {
"builder": "feflow-devkit-xbc-webpack4:formalTest",
"options": {
"isMinicss": true
}
},
"demo": {
"builder": "feflow-devkit-xbc-webpack4:demo",
"options": {
"isMinicss": true
}
},
"build": {
"builder": "feflow-devkit-xbc-webpack4:build",
"options": {
"port": 8003,
"isMinicss": true,
externals: [{
optionsId: 100, // xbc会将 optionsId 一致的配置去重,用作公共配置和单个配置的 去重
module: "antd",
entry: "https://cdn.bootcss.com/antd/3.26.12/antd.min.js",
global: "antd"
}, {
module: "Vue",
entry: "",
global: "vue"
}, ],
}
}
},
"commons": { // 此处为公用配置
"entry": "main.js", // 配置项目webpack 编译入口
"isModule": false, // 开启css模块化 (vue项目不需要开启)
"isMinicss": true, // 是否需要抽离css (本地调试环境不需要)
"hasAnalyzer": false, // 是否开启webpack包大小的调试
"analyzerOptions": { // 调试包的配置
"analyzerPort": 3478
},
"port": 1234, // webpack静态服务器启动端口号
"alias": { // webpack别名配置
"@": "src",
},
externals: [{
optionsId: 100, // xbc会将 optionsId 一致的配置去重,用作公共配置和单个配置的 去重
module: "antd",
entry: "https://cdn.bootcss.com/antd/3.26.12/antd.min.js",
global: "antd"
}, {
module: "Vue",
entry: "",
global: "vue"
}, ],
"envs": { // 环境变量配置 目前只支持固定环境变量配置
"dev": {
"envObj": {
"NODE_ENV": "\"development\"",
"API_HOST": "\"http://xxx.xxx.xx.x:xxxx\"",
}
},
"test": {
"envObj": {
"NODE_ENV": "\"test\"",
"API_HOST": "\"http://xxx.xxx.xx.x:xxxx\"",
}
},
"formalTest": {
"envObj": {
"NODE_ENV": "\"formalTest\"",
"API_HOST": "\"http://xxx.xxx.xx.x:xxxx\"",
}
},
"demo": {
"envObj": {
"NODE_ENV": "\"demo\"",
"API_HOST": "\"http://xxx.xxx.xx.x:xxxx\"",
}
},
"build": {
"envObj": {
"NODE_ENV": "\"production\"",
"API_HOST": "\"http://xxx.xxx.xx.x:xxxx\"",
}
}
}
}
}
}
| 参数 | 说明 | 必须 | 类型 | 默认值 |
| -------- | ------------ | ---- | ------ | ------ |
| commands | 脚本配置命令 | true | object | {} |
| commons | 面包屑路径 | true | object | {} |
##### 模板使用方式
`shell`
fef install generator-**
fef init
##### 搭配套件使用的模板
- generator-xbc-react React后台管理模板
- 配置TS
- mobx
- ant4
- generator-xbc-vue Vue后台管理模板
- 配置TS
- Vuex
- element
- generator-xbc-wechat 微信小程序模板
- vant
- mobx
##### 自定义模板
- 开发模板
- 单个环境的配置比commons中的配置优先级高
- 类似externals这种对象数组的配置在commons和单个环境中同时存在时,插件会将optionsId相同的配置去重
- 目前只支持固定环境变量配置
`sh`
$ fef dev # 本地开发时的命令
$ fef test # 发布时的打包命令开发测试
$ fef formalTest # 发布时的打包命令测试测试
$ fef demo # 发布时的打包命令演示环境
$ fef build # 发布时的打包命令生产环境
1. 发布版本
``
npm run release`
2. 生成CHANGELOG``
npm run changelog
本项目遵从 Semantic Versioning.
每次发布信息都会在 Github 的 Releases 中呈现.
pr工作流