「由于链接无法跳转,请点击阅读原文查看详情喔,记得给bruce-cli一个Star」
bruce-cli
是一个「React/Vue」应用自动化构建脚手架,其零配置开箱即用的优点非常适合入门级、初中级、快速开发项目的前端同学使用,还可通过创建brucerc.js
文件覆盖其默认配置,只需专注业务代码的编写无需关注构建代码的编写,让项目结构更简洁。详情请戳这里,使用时记得查看文档哟,喜欢的话给个Star
bruce-cli
在前端技术的日益壮大下,从以前简单的几个文件到现在复杂的一堆文件,各种扩展和工具植入到项目里,使得项目越来越庞大越来越难管理,前端项目也因此趋于工程化
和一体化
。日新月异的前端技术已让前端代码的业务逻辑和交互效果越来越复杂,项目会一直维护和迭代,令开发者更加不易于管理。模块化开发和各种框架把项目分成若干个小模块,增加了最后发布的困难,无一个统一的标准,让前端项目结构千奇百怪。通常的项目都是团队开发,每个人的代码编写习惯和逻辑编写风格也很难一致。工作围绕着「开发效率」和「运行性能」的工程化问题是我们作为前端开发者必须得处理的问题。因此前端项目自动化构建在整个项目开发中越来越重要。
本项目是一个基于
Webpack4.x.x
开发的极速零配置开箱即用的Web应用构建工具(「每次更新都会保持最新依赖」),集成各种常用工具(Handlebars、Postcss
、Polyfill
、Sass
、Less
、Babel
、TypeScript
、Stylelint
、Eslint
、Cssnano
、Uglifyjs
、Terser
和Tinyimg
等)扩展构建功能,用于构建和管理「React/Vue」技术栈的项目应用
npm i -g bruce-cli
安装失败
npm config set registry https://registry.npm.taobao.org/
npm config set disturl https://npm.taobao.org/mirrors/node/
npm i -g bruce-cli
~ | 命令 | 缩写 |
---|---|---|
构建项目 | 「bruce build」 | bruce b |
初始项目 | 「bruce init」 | bruce i |
切换语言 | 「bruce locale」 | bruce l |
创建组件 | 「bruce new」 | bruce n |
删除依赖 | 「bruce remove」 | bruce r |
命令功能
内置功能
开发环境
、测试环境
和生产环境
三种模式,每种模式对应不同的构建配置和优化方案Hot Module Replacement
,配合react-hot-loader
或vue-loader
增量更新css文件
和js文件
,修哪更哪,无需刷新页面即可实时预览修改结果,并保存当前数据状态polyfill
,根据浏览器请求时的UserAgent
返回垫片文件,babel
编译JS代码时就无需带上垫片编译,起到减包作用
polyfill
,根据browserslist
和编写代码中的ES6语法自动插入所需垫片import().then()
),处理代码时会单独分离该模块,执行页面对应操作时才加载该模块,使用才加载不使用则不加载(代码懒加载
),减少首屏加载代码大小和渲染时间postcss/sass/less
)和JS编译器(babel/typescript
)编译样式和脚本,开发时可使用最新特性或草案规范的语法,使得代码更简洁,提高代码的可读性raw-loader
,用于处理txt文件
,把文件内容以字符串的形式导入handlebars-loader
,用于处理内联HTML
和hbs文件
,把HTML元素以内联的形式插入到页面中style-loader
和css-loader
,用于处理css文件
(包含sass/scss/less
转换后的css文件
),把CSS从JS中单独抽离出来postcss-loader
,用于处理CSS最新特性和草案规范,根据browserslist
增加CSS属性前缀sass-loader
,用于处理sass文件
和scss文件
,通过dart-sass
将sass/scss
编译成css
less-loader
,用于处理less文件
,通过less
将sass/less
编译成css
babel-loader
,根据预设环境和browserslist
并结合polyfill
处理编写的ES6代码
和TS代码
,并生成大众浏览器可识别的ES5代码
CSS校验
:内置stylelint
,配置标准的CSS语法规则,检查和纠正出现的语法错误JS校验
:内置eslint
,配置标准的JS和TS语法规则,检查和纠正出现的语法错误WebpackRuntime代码块
、第三方依赖代码块
、公共业务代码块
和单个业务代码块
四大部分减包作用
CSS压缩
:内置cssnano
,压缩去重抽离出来的CSSJS压缩
:内置uglifyjs
和terser
,压缩去重抽离出来的JS,uglifyjs
用于压缩ES5
,terser
用于压缩ES6
图像压缩
:内置tinyimg
,无损压缩jpg
和png
图像proxy
反向代理服务端接口,解决接口跨域问题file-loader
和url-loader
,用于处理字体、图像、音频和视频等媒体资源,图像小于10k时转换为Base-64 URL
Scope Hoisting
,分析出模块间的依赖关系,把构建好的模块合并到一个函数中,起到减包作用
Tree Shaking
,禁止babel
把代码转换成CommonJS规范
,使用ESM规范
的静态声明特点去除不被引用或不被执行的代码块,起到减包作用
brucerc.js
修改默认配置,构建启动时就会使用该配置文件覆盖默认构建配置err
:错误信息default
表示普通应用,react
表示React应用,vue
表示Vue应用)node_modules/xxx
),默认不对node_modules
编译scss/less
)mode
:运行环境(test
表示测试环境,prod
表示生产环境)dir
:输出路径host
:服务器IP地址password
:密码(不可与privateKey
共存)path
:目标文件路径privateKey
:秘钥(不可与password
共存)username
:账号mode
:运行环境(test
表示测试环境,prod
表示生产环境)默认配置
module.exports = {
alias: {},
browserList: [
"last 20 Chrome versions",
"last 20 Firefox versions",
"last 20 Opera versions",
"Explorer >= 10",
"Safari >= 8",
"Android >= 5",
"iOS >= 8"
],
errorCb: null,
eslintIgnores: [],
eslintRules: {
// eslint规则配置
// 查看bruce-cli模块下的temp/configs/eslintrc.{default/react/vue}.js
},
frame: "default",
includeModules: [],
openPath: "",
proxy: {},
style: "scss",
stylelintIgnores: [],
stylelintRules: {
// stylelint规则配置
// 查看bruce-cli模块下的temp/configs/stylelintrc.{default/react/vue}.js
},
successCb: null,
uploadOpts: null,
useTs: false
};
覆盖配置
.js
形式的配置文件,可参考以下配置编写CommonJS规范
开发,所以必须使用module.exports = { ... };
导出以下配置uploadOpts
设置为null
或删除该字段,并使用successCb
定义上传操作module.exports = {
alias: {
swiper: "swiper/dist/js/swiper.js"
},
browserList: [
"> 0.5%",
"last 2 versions"
],
errorCb(err) {
console.log("错误信息", err);
}
eslintIgnores: [
"src/components/*"
],
eslintRules: {
"space-before-function-paren": ["error", "always"]
},
frame: "react",
includeModules: [
"lodash",
"trample"
],
openPath: "?abc=123",
proxy: [{
changeOrigin: true,
context: [
"/login",
"/list",
"/detail"
],
secure: false,
target: "https://www.baidu.com"
}],
style: "less",
stylelintIgnores: [
"src/assets/css/*"
],
stylelintRules: {
"color-hex-case": "upper"
},
successCb(mode, dir) {
console.log("运行环境", mode);
console.log("输出路径", dir);
},
uploadOpts(mode) {
return {
host: "your server ip",
password: "your server password",
path: "/root/www",
username: "root"
};
},
useTs: true
};
IDE相关
VSCode
驱动Stylelint
或Eslint
,需在IDE上安装Stylelint插件和Eslint插件才能配合本项目校验代码并高亮显示警告和错误Stylelint
或Eslint
的详细配置可参考笔者的开源项目vscode-lintCLI相关
简体中文
,如需切换繁体中文/英文
请执行bruce l
切换React
和Vue
的构建配置,请勿构建Angular
或其他MVVM
项目React
应用或Vue
应用才能使用bruce n
命令brucerc.js
的属性是null/""/[]/{}
时,会使用内置配置默认值bruce r
删除node_modules
并重新安装依赖即可文件相关
.js/.jsx/.vue
,TS项目下脚本文件只能是.ts/.tsx/.vue
src/index.(js|ts|jsx|tsx)
src/pages/pageName/index.(js|ts|jsx|tsx)
src/pages
目录存在且包含子文件夹,则自动识别为MPA项目
CSS精灵图
时,必须把图标统一放到src/assets/icon
下,且文件格式为png
RUN_ENV
用于获取当前运行环境,在使用Eslint
会报语法错误,在代码后面追加// eslint-disable-line
即可dev
:开发环境test
:测试环境prod
:生产环境#
:根目录@
:src
目录垫片相关
@babel/polyfill
在7.4.0
后被弃用,因此本项目使用的垫片为core-js
和regenerator-runtime
import "core-js/stable";
和import "regenerator-runtime/runtime";
,构建程序会自行根据预设环境和browserslist
增加垫片core-js
和regenerator-runtime
,在入口文件最顶处插入import "core-js/stable";
和import "regenerator-runtime/runtime";
ES6相关
bruce b
构建项目时,若是首次构建会提示构建package.json
下dependencies
的依赖(Dll构建
),目的是加快后续开发中HMR
的构建速度,只构增量建修改过的文件,其余文件一概读取缓存bruce b
构建项目时不要选择该依赖加入到Dll构建
中,并在brucerc.js
的includeModules
上增加该依赖,构建时会去除不被引用或不被执行的代码块TS相关
tsconfig.json
tsconfig.json
普通项目相关(
bruce i
初始项目时选择default
)
handlebars
模板src/index.js
或src/pages/pageName/index.js
src/templates/helpers
目录下,在模板内使用{{> fileName}}
引用src/templates/partials
目录下,在模板内使用{{fileName param}}
引用Github上常见的构建项目都是暴露出很多构建代码,构建代码和业务代码完全耦合在一起,导致维护和升级成本加重,重新开一个项目还是会遇到该问题。
本项目就显得比较特殊,真正实现构建代码和业务代码的完全分离,以NPM模块
的形式锁定构建代码,只通过一个配置文件与业务代码通讯,让开发者解放双手,只需写好业务代码。
以下对传统构建方案和本构建方案进行一次合理的对比
传统构建方案
基于Gulp/Webpack
构建的React/Vue项目
,项目代码分为「构建代码」和「业务代码」,项目目录和文件配置是比较传统和多人使用的项目搭建方案。整个项目中除去业务代码后,构建代码的文件较多,配置比较分散,较难集中管理,无法做到开箱即用,通用性较低,前期搭建项目构建方案可能花费的时间较多,项目构建时需依赖本项目存在的依赖模块才能驱动。对于增删改构建功能和新同事入门,可能需花较多的时间去查找代码和熟悉构建逻辑。
传统构建方案目录
本构建方案
基于本项目构建的React/Vue项目
,代码只有「业务代码」,构建代码集中在一起做成一个NPM模块
并安装到全局环境中,通过命令调用本方案驱动需开发的项目,实现构建代码和业务代码完全分离。开发时无需关注如何写好构建代码和使用何种工具扩展构建功能,只需专注于业务代码的编写,整个项目只存在业务代码,可通过配置文件修改默认构建配置,大大缩减项目前期的准备工作,保证项目的「简洁性」、「独立性」、「高效性」和「维护性」。省去项目前期搭建的时间,直接开箱即用,使开发者集中精力写好业务代码。
本构建方案目录
方案对比
~ | 传统构建方案 | 本构建方案 |
---|---|---|
构建文件 | build文件夹、config文件夹.browserslistrc.postcssrc、babelrc.stylelintignore、.stylelintrc.eslintignore、.eslintrc | 无 |
业务文件 | src文件夹 | src文件夹 |
配置文件 | 很多,需分开书写 | brucerc.js |
基础文件 | package.json、readme.md | package.json、readme.md |
依赖模块 | Webpack/Gulp技术栈(构建)React/Vue技术栈(业务) | React/Vue技术栈(业务) |
安装时间 | 较慢安装构建和业务代码的依赖模块每次开发都需安装一次 | 较快只安装业务代码的依赖模块全局安装一次即可 |
开发准备 | 编写Webpack/Gulp和多种工具搭配的构建代码 | 开箱即用 |
全局使用 | 不可行 | 可行 |
构建复用 | 新建文件夹,复制粘贴构建代码,修改配置文件等 | 执行命令行初始项目和构建项目 |
新手构建 | 需了解构建代码逻辑和配置文件 | 执行命令行 |
后期扩展 | 在原有构建代码中增删改构建功能 | 通过配置文件brucerc.js增删改构建功能 |
配置管理 | 分散到不同的构建配置文件中需对不同工具的配置文件修改 | 集成构建的基础配置可通过配置文件brucerc.js覆盖 |
以下是一个完整的项目开发流程:
bruce -h
bruce -v
bruce l
cd projectList
bruce i
cd myProject
bruce b
cmd
窗口执行):bruce n
cmd
窗口执行):bruce b
bruce r
正确使用姿势请看这个视频,简单易用方便快捷,「一次安装全局运行」,实在是「远离架构专注编码的必备工具」。
笔者的个人官网使用bruce-cli
构建,可当做bruce-cli
示例,有兴趣的同学请戳JowayYoung个人官网查看详情。
MIT © Joway Young
本项目由笔者独自开发,全程无任何人参与,经过3年多的时间沉淀出来,整个过程进行了大量的项目测试和应用,目前上线的项目多达50
多个,足可支撑本项目的可行性和稳定性。
由于自己项目开发经验和技术积累有限,不能保证本项目不存在任何Bug,若在后续使用本项目时发现Bug或产生疑问,可随时在Issues上提出你的宝贵建议,笔者会立马反馈和修复相关Bug。
本项目源于2017年3月
笔者负责一个Angular2
项目里的构建代码,从最初的Webpack2
一直迭代到今天的Webpack4
,话说Webpack5
过段时间就要发布了。
最初笔者的构思是写一份构建代码模板存放在Github
上,然后通过脚本把构建代码拉下来。可是这样构建代码和业务代码还是同时存放在一个文件夹里,不易管理,文件又多又杂。下次新开项目时又要把构建代码复制过去,有时升级构建功能,为了保持构建功能的统一,需同时修改几个项目里的构建代码。既然这样,为何不把那些通用的构建代码抽离出来做成一个NPM模块呢,这样「一次安装全局」运行,多爽呀!
2017年5月
笔者就开始对这个项目升级改造,做成一个NPM模块,只不过一直在自己负责的项目上应用。因为还没怎样应用到其他的项目上,所以也不敢开源。经过差不多1年大大小小20多个项目的应用,终于稳定了这个项目的功能,所以笔者也决定对bruce-cli
开源。对于所有通过bruce-cli
创建的项目都可开箱即用所有的构建功能,如无特殊需求甚至是零配置即可运行项目。
开发这个项目经历了很多,挖的坑很多,填的坑也很多,很苦很累,有段时间还经常熬夜就是为了把它做得更好。不过收获也很大,学习了很多新知识新技能,把常用的Node知识都用上了,也为自己后期做Node应用开发打下了巩固的基础。有付出就有收获,笔者还是一直深信这句话,因为自己确实进步了很多。截止2020年,已成功运用在自己所负责的项目达到50
多个,再加上一些同行朋友和一些小公司也有使用本项目。
本项目基于Node12+
开发,为了兼容Node10+
,所以使用babel
编译了源码,生成现在线上版本的代码,待更多的项目测试完成和应用起来后会开放源码供大家一起学习和完善。
若觉得bruce-cli
对你有帮助,可在Issue上提出你的宝贵建议
,笔者会认真阅读并整合你的建议。喜欢bruce-cli
的请给一个Star,或Fork本项目到自己的Github
上,根据自身需求定制功能。
「由于链接无法跳转,请点击阅读原文查看详情喔,记得给bruce-cli一个Star」