Bruce Cli

bruce-cli是一个React/Vue应用自动化构建脚手架，其零配置开箱即用的优点非常适合入门级、初中级、快速开发项目的前端同学使用，还可通过创建brucerc.js文件覆盖其默认配置，只需专注业务代码的编写无需关注构建代码的编写，让项目结构更简洁。详情请戳这里，使用时记得查看文档哟，喜欢的话给个Star

🎥背景

在前端技术的日益壮大下，从以前简单的几个文件到现在复杂的一堆文件，各种扩展和工具植入到项目里，使得项目越来越庞大越来越难管理，前端项目也因此趋于工程化和一体化。日新月异的前端技术已让前端代码的业务逻辑和交互效果越来越复杂，项目会一直维护和迭代，令开发者更加不易于管理。模块化开发和各种框架把项目分成若干个小模块，增加了最后发布的困难，无一个统一的标准，让前端项目结构千奇百怪。通常的项目都是团队开发，每个人的代码编写习惯和逻辑编写风格也很难一致。工作围绕着开发效率和运行性能的工程化问题是我们作为前端开发者必须得处理的问题。因此前端项目自动化构建在整个项目开发中越来越重要。

🔗依赖

本项目是一个基于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镜像为淘宝镜像：npm config set registry https://registry.npm.taobao.org/
切换Node镜像为淘宝镜像：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`

☎️语言

zh-chs：简体中文默认
zh-cht：繁體中文
en：English

💡功能

命令功能

构建项目：根据终端交互式问答选择所需配置构建项目，可选开发环境、测试环境和生产环境
初始项目：根据终端交互式问答选择所需配置生成项目的骨架文件和入口文件
切换语言：根据终端交互式问答选择所需配置切换终端文本语言，可选简体中文、繁体中文和英文
创建组件：根据终端交互式问答输入所需配置在项目根目录对应的路径下创建模板文件
删除依赖：快速删除项目依赖文件和依赖锁定文件

内置功能

⚙️配置

alias：模块导入快捷方式，配置详情请参考webpack-resolve-alias
browserList：目标浏览器配置列表，配置详情请参考browserslist
errorCb(err)：构建失败回调函数，可自定其他操作
- err：错误信息
eslintIgnores：Eslint忽略路径列表，配置详情请参考eslint-ignores
eslintRules：Eslint校验规则列表，配置详情请参考eslint-rules和rules
frame：开发框架(default表示普通应用，react表示React应用，vue表示Vue应用)
includeModules：编译模块白名单列表(node_modules/xxx)，默认不对node_modules编译
openPath：开发环境下浏览器打开后显示URL路径
proxy：接口代理，配置详情请参考webpack-dev-server-proxy
style：样式格式(scss/less)
stylelintIgnores：Stylelint忽略路径列表，配置详情请参考stylelint-ignores
stylelintRules：Stylelint校验规则列表，配置详情请参考stylelint-rules和rules
successCb(mode, dir)：构建成功回调函数，可自定义上传文件操作或其他操作
- mode：运行环境(test表示测试环境，prod表示生产环境)
- dir：输出路径
uploadOpts(mode)：上传配置函数(必须返回一个Object，并包含以下字段)，配置详情请参考scp2
- 回调参数
  - mode：运行环境(test表示测试环境，prod表示生产环境)
- 返回对象
  - host：服务器IP地址
  - password：密码(不可与privateKey共存)
  - path：目标文件路径
  - privateKey：秘钥(不可与password共存)
  - username：账号
useTs：集成TypeScript

默认配置

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开发项目，以下配置也是基于VSCode驱动
若启用Stylelint或Eslint，需在IDE上安装Stylelint插件和Eslint插件才能配合本项目校验代码并高亮显示警告和错误
Stylelint或Eslint的详细配置可参考笔者的开源项目vscode-lint

CLI相关

默认显示语言为简体中文，如需切换繁体中文/英文请执行bruce l切换
目前只装备了React和Vue的构建配置，请勿构建Angular或其他MVVM项目
当前应用只能是React应用或Vue应用才能使用bruce n命令
配置文件brucerc.js的属性是null/""/[]/{}时，会使用内置配置默认值
请务必遵循构建错误提示修正相关错误，不要随意改动构建源码和生成配置，否则可能导致项目构建进程无法运行
多次构建后可能因为长时间使用长缓存优化，导致缓存有几率读取失败，重新构建时可能会提示错误，此时执行bruce r删除node_modules并重新安装依赖即可

文件相关

项目只能单独存在JS或TS，JS项目脚本文件只能是.js/.jsx/.vue，TS项目下脚本文件只能是.ts/.tsx/.vue
应用类型为SPA时，入口文件必须为src/index.(js|ts|jsx|tsx)
应用类型为MPA时，入口文件必须为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的构建速度，只构增量建修改过的文件，其余文件一概读取缓存
若某个依赖使用ESM按需导入，在执行bruce b构建项目时不要选择该依赖加入到Dll构建中，并在brucerc.js的includeModules上增加该依赖，构建时会去除不被引用或不被执行的代码块

TS相关

当使用TS时，会在项目根目录下自动生成配置文件tsconfig.json
如需修改TS配置，只需修改tsconfig.json

普通项目相关(bruce i初始项目时选择default)

可使用内置handlebars模板
入口文件必须为src/index.js或src/pages/pageName/index.js
初始时的应用类型为SPA(不提供MPA形式的初始化)，如需转换成MPA，必须按照基础项目规定的入口文件形式重新分配文件路径
可用来开发原生JS项目、Jquery项目和Zepto项目等
公共函数需放置src/templates/helpers目录下，在模板内使用{{> fileName}}引用
公共模板需放置src/templates/partials目录下，在模板内使用{{fileName param}}引用
公共函数和公共模板的用法和示例请参考handlebars-loader

⚖️对比

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个人官网查看详情。

📝待做

修复Vue项目下无法校验vue文件以外的css/sass/scss/less文件

📆日志

0.6.0

由于tslint的性能问题，所有tslint功能改由eslint代替
将stylelint和eslint的配置格式从JSON转换成JS

0.5.0

升级postcss，更新其配置文件
移除node-sass，使用sass/dark-sass代替其功能，让bruce-cli下载更快运行更稳

0.4.0

限制bruce-cli必须在Node v12以上使用
修改core-js版本检测，如需导入core-js作为polyfill，必须使用core-js v3
增加tinyimg-webpack-plugin，用于压缩图像
调整终端交互面板的显示文案

0.3.0

React项目模板改用Reack Hooks的形式
移除publicPathProd和publicPathTest两个参数，打包文件引用路径统一使用绝对路径

🔖版权

本项目由笔者独自开发，全程无任何人参与，经过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上，根据自身需求定制功能。

关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
bin		bin
config		config
i18n		i18n
lib		lib
pipe		pipe
temp		temp
util		util
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmignore		.npmignore
license		license
package.json		package.json
process.lock		process.lock
readme.md		readme.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Bruce Cli

🎥背景

🔗依赖

📦安装

💻使用

☎️语言

💡功能

⚙️配置

📋细节

⚖️对比

🔨示例

📝待做

📆日志

🔖版权

⏳后记

About

Releases

Packages

Languages

License

krisluoxh/bruce-cli

Folders and files

Latest commit

History

Repository files navigation

Bruce Cli

🎥背景

🔗依赖

📦安装

💻使用

☎️语言

💡功能

⚙️配置

📋细节

⚖️对比

🔨示例

📝待做

📆日志

🔖版权

⏳后记

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages