一个零配置开箱即用的React&Vue应用自动化构建脚手架

时间 2019-11-05

标签一个配置即用 react&vue react vue 应用自动化构建脚手架栏目 React 繁體版

原文原文链接

Bruce Cli

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

🎥背景

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

🔗依赖

本项目是基于Webpack4.x.x进行开发的极速零配置开箱即用的Web应用打包工具(每次更新都会保持最新的依赖)，集成各类经常使用工具(Handlebars、Postcss、Sass、Less、Babel、TypeScript、Stylelint、Eslint、Tslint等)扩展构建功能，用于构建和管理React/Vue技术栈的项目应用vue

📦安装

npm i -g bruce-cli
yarn global add bruce-cli

安装失败node

将npm源镜像设置为淘宝镜像：npm config set registry https://registry.npm.taobao.org/
从新执行命令安装：npm i -g bruce-cli 或 yarn add global 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

💡功能

命令功能react

构建项目：根据终端交互式问答选择所需的配置进行项目调试和项目打包
初始项目：根据终端交互式问答选择所需的配置生成项目的基本文件和入口文件
切换语言：切换在终端面板中显示的文本语言，可选简体中文、繁体中文、英文
建立组件：输入组件路径后在项目根目录对应的路径下建立模板文件
删除依赖：快速删除项目依赖文件和依赖锁定文件

内置功能linux

模式选择：提供开发环境、测试环境、生产环境三中模式，每种模式对应不一样的构建配置和优化方案
端口监听：使用开发模式时，启动本地服务器，并监听指定端口，可自动打开浏览器来访问页面
局部刷新：启用Webpack内置的HMR，配合react-hot-loader或vue-loader，增量更新css文件和js文件，修哪更哪，无需刷新页面便可实时看见修改结果，并保存当前状态管理
入口判断：快速扫描项目中指定的入口文件路径，判断其是否存在，项目构建中入口文件做为根节点，必须得保证其存在和路径正确
垫片插入：根据项目兼容性自动插入垫片，兼容低版本浏览器
- 插入动态polyfill，根据浏览器请求时的UserAgent返回垫片文件，babel编译JS代码时就不带上垫片进行编译，起到减包做用
- 插入静态polyfill，根据browserslist和编写代码中的ES6语法自动插入所需的垫片代码
动态导入：可以使用动态导入的语法(import().then())，处理代码时会单独分离此模块，执行页面对应操做时才加载此模块，使用才加载不使用则不加载(代码懒加载)，减小首屏加载代码大小和渲染时间
代码编译：内置CSS编译器(Postcss、Sass、Less)和JS编译器(Babel、TypeScript)编译样式和脚本，开发时可以使用最新或草案规范中的语法，使得代码更简洁，提升代码的可读性
- 使用raw-loader处理和TXT，把文件内容以字符串的形式导入
- 使用handlebars-loader处理内联HTML和HBS，把HTML元素之内联的形式插入页面当中
- 使用style-loader和css-loader处理CSS，把CSS从JS中单独抽离出来
- 使用postcss-loader处理CSS新特性和草案规范，根据browserslist增长CSS前缀
- 使用sass-loader处理Sass，经过node-sass编译sass文件为css文件
- 使用less-loader处理Less，经过less编译less文件为css文件
- 使用babel-loader和ts-loader根据预设环境和browserslist分别处理编写的ES6代码和TS代码，并生成浏览器可识别的ES5代码
代码校验：确保编写的语法没有错误，统一规范团队协做中每位同事的代码编写风格，减小代码冗余，在保证代码语法正确的前提下提升代码的可读性
- CSS校验：内置stylelint，配置标准的CSS语法规则，对开发过程当中出现的语法错误进行检查和纠正
- JS校验：内置eslint和tslint，配置标准的JS和TS语法规则，对开发过程当中出现的语法错误进行检查和纠正
友好提示：当遇到警告和错误时输出语法高亮的代码片断和解决提示，帮助开发者定位问题
代码分割：对业务代码进行打包，分割成WebpackRuntime代码块、第三方依赖代码块、公共业务代码块、单个业务代码块
代码合并：经过对相同模块、相同功能或复用屡次的代码进行总体合并，起到减包做用
压缩合并：
- CSS压缩：内置cssnano，对抽离出来的CSS进行压缩去重
- JS压缩：内置uglifyjs和terser，对抽离出来的JS进行压缩去重，uglifyjs用于压缩ES5，terser用于压缩ES6
- 图片压缩：内置imagemin，对png、jpg等图像进行无损压缩
接口代理：使用proxy反向代理服务端接口，解决接口跨域问题
资源处理：使用file-loader和url-loader来处理字体、图像、音频、视频资源
摇树优化：启用Webpack内置的Tree Shaking，禁止babel把代码转换成Commonjs规范，使用ESM规范的静态声明特色来去除不被引用或不被执行的代码块，起到减包做用
缓存优化：在开启文件哈希化后，根据文件哈希值是否发生变化来执行打包操做，哈希没有变化的文件直接从缓存中获取，减小打包生成文件的时间
文件哈希：可对生成文件设置哈希值，只有文件内容修改了才会更改哈希值，用于长缓存优化
文件缓存：第一次构建速度可能慢一些，构建完成后会生成本地缓存文件，可提升后续再次构建的速度
目录时化：可对输出的项目根目录进行时间序列化命名，增长时间戳来区分版本
打包分析：可在打包完成后展现打包依赖的关系，根据关系图对模块的编写进行合理的分配和修改
文件上传：暴露出构建成功的钩子，可在钩子函数上编写上传到服务器的代码用于打包后将文件上传到服务器，还可进行其余操做
配置定制：当部分配置不符合项目需求时，可经过项目根目录下的配置文件brucerc.js来修改默认配置，构建启动时就会使用此配置文件来覆盖默认构建配置

⚙️配置

alias：模块导入快捷方式，配置详情请参考webpack resolve alias
browserList：目标浏览器配置列表，配置详情请参考browserslist
errorCb(err)：构建失败回调函数，可自定其余操做
- err：错误信息
eslintIgnores：Eslint忽略路径列表，配置详情请参考eslint ignores
eslintRules：Eslint校验规则列表，配置详情请参考eslint rules和rules
frame：开发框架(default表示普通应用，react表示React应用，vue表示Vue应用)
openPath：开发环境下浏览器打开后显示URL路径
proxy：接口代理，配置详情请参考webpack-dev-server proxy
publicPathProd：生产环境公共路径
publicPathTest：测试环境公共路径
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：帐号
useAssetsRelPath：使用资源相对路径
useTs：集成TypeScript

默认配置webpack

module.exports = {
    alias: {},
    browserList: [
        "last 20 Chrome versions",
        "last 20 Firefox versions",
        "last 20 Opera versions",
        "Explorer >= 11",
        "Safari >= 8",
        "Android >= 4.4",
        "iOS >= 8"
    ],
    errorCb: null,
    eslintIgnores: [],
    eslintRules: {
        // eslint规则配置
        // 查看bruce-cli模块下的temp/configs/eslintrc-{default/react/vue}.json
    },
    frame: "default",
    openPath: "",
    proxy: {},
    publicPathProd: "",
    publicPathTest: "",
    style: "scss",
    stylelintIgnores: [],
    stylelintRules: {
        // stylelint规则配置
        // 查看bruce-cli模块下的temp/configs/stylelintrc-{default/react/vue}.json
    },
    successCb: null,
    uploadOpts: null,
    useAssetsRelPath: false,
    useTs: false
};
复制代码

覆盖配置git

目前只提供.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",
    openPath: "?abc=123",
    proxy: [{
        changeOrigin: true,
        context: [
            "/login",
            "/list",
            "/detail"
        ],
        secure: false,
        target: "https://www.baidu.com"
    }],
    publicPathProd: "https://www.baidu.com",
    publicPathTest: "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"
        };
    },
    useAssetsRelPath: true,
    useTs: true
};
复制代码

📋细节

CLI相关github

默认显示语言为简体中文，如需切换繁体中文或英文请执行bruce l进行切换
目前只装备了React和Vue的构建配置，请勿用来构建Angular或其余MVVM项目
当前应用只能是React应用或Vue应用才能使用bruce n命令
配置文件brucerc.js的属性是null、[]、{}时，会使用内置配置默认值
请务必遵循构建错误提示进行修正，不要随意改动构建源代码和生成配置，有可能致使项目构建进程没法运行

IDE相关web

推荐使用VSCode进行项目开发，如下配置也是基于VSCode进行
若是启用Stylelint、Eslint、Tslint，须要在IDE上安装Stylelint插件、Eslint插件、Tslint插件才能配合本项目代码校验高亮显示警告和错误
如需Stylelint高亮显示语法错误和保存时自动修复语法错误，可在首选项>设置中设定(目前失效)
如需Eslint高亮显示语法错误和保存时自动修复语法错误，可在首选项>设置中设定(参考插件文档)
如需Tslint高亮显示语法错误和保存时自动修复语法错误，可在首选项>设置中设定(参考插件文档)

文件相关

项目只能单独存在JS或TS，JS项目下脚本文件只能是.js或.jsx，TS项目下脚本文件只能是ts或tsx
应用类型为SPA时，入口文件必须为src/index.js|ts|jsx|tsx
应用类型为MPA时，入口文件必须为src/pages/pageName/index.js|ts|jsx|tsx
Vue项目下导入vue文件时，后缀名.vue不能省略，不然会报错
当src/pages目录存在且包含子文件夹，则自动识别为MPA项目
使用CSS精灵图时，必须把图标统一放到src/assets/icon下，且文件格式为png
暴露出全局变量RUN_ENV用于获取当前运行环境，在使用Eslint或Tslint的状况下会报语法错误，在后面加上eslint-disable-line或tslint:disable-line便可
- dev：开发环境
- test：测试环境
- prod：生产环境
文件导入快捷方式
- #：根目录
- @：src目录

垫片相关

@babel/polyfill在7.4.0后被弃用，所以本项目使用的垫片为core-js和regenerator-runtime
如无特殊兼容，入口文件最顶处无需增长import "core-js/stable";和import "regenerator-runtime/runtime";
如需兼容低版本浏览器，在入口文件最顶处加入import "core-js/stable";和import "regenerator-runtime/runtime";(core-js版本必须为2.x.y)

TS相关

当使用TS时，会在项目根目录下自动生成配置文件tsconfig.json
如需修改TS配置，只需修改tsconfig.json
如需修改Tslint配置，在项目根目录下建立配置文件tslint.json，手动编写配置覆盖默认Tslint配置

Default项目相关(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

⚖️对比

传统构建方案
本构建方案

传统构建方案

基于Gulp和Webpack构建的React项目，项目代码分为构建代码和业务代码，项目目录和文件配置是比较传统和多人使用的项目搭建方案。整个项目中除去业务代码后，构建代码的文件比较多，配置比较分散，比较难集中管理，没法作到开箱即用，通用性比较低，前期搭建项目构建方案可能花费的时间比较多，项目构建时需依赖本项目存在的依赖模块才能驱动。对于增删改构建功能和新同事入门，可能须要花比较多的时间去查找代码和熟悉构建逻辑

本构建方案

基于Webpack构建的React项目，代码只有业务代码，构建代码集中在一块儿作成一个npm模块并安装到全局环境中，经过命令调用本方案来驱动此项目，实现构建代码和业务代码彻底分离。开发时无需关注如何写好构建代码和使用何种工具扩展构建功能，只需专一于业务代码的编写，整个项目只存在业务代码，可经过配置文件修改默认构建配置，大大节省项目前期准备时间，保证项目的简洁性、独立性、高效性、维护性。省去项目前期搭建准备，直接开箱即用，使开发者集中精力写好业务代码

方案对比

~	传统构建方案	本构建方案
构建文件	`build文件夹` `config文件夹` `tools文件夹` `.browserslistrc` `.postcssrc` `.babelrc` `.stylelintignore` `.stylelintrc` `.eslintignore` `.eslintrc`	无
业务文件	`src文件夹`	`src文件夹`
配置文件	无(已集成在构建文件中)	`brucerc.js`
基础文件	`package.json` `readme.md`	`package.json` `readme.md`
依赖模块	`Webpack技术栈`(构建) `React技术栈`(业务)	`React技术栈`(业务)
安装时间	较慢安装构建和业务代码依赖的模块	较快只安装业务代码依赖的模块
开发准备	编写webpack和多种工具搭配的构建代码	开箱即用
全局使用	不能够	能够
构建复用	新建文件夹，复制粘贴构建代码，修改配置文件等	执行命令行初始项目和构建项目
新手构建	需了解构建代码逻辑和配置文件	执行命令行
后期扩展	在原有构建代码中进行增删改构建功能	经过配置文件`brucerc.js`进行增删改构建功能
配置管理	分散到不一样的构建配置文件中	集成构建的基础配置可经过配置文件`brucerc.js`进行覆盖

🔖版权

本项目由本人独自开发，通过2年多的时间沉淀出来，过程当中进行了大量的项目测试和应用，目前上线的项目多达20多个，足能够支撑本项目的可行性和稳定性。

因为本身项目开发经验和技术积累有限，不能保证本项目不存在任何Bug，若是在后续使用本项目时发现Bug或产生疑问，能够随时Issues或经过WeChat联系我(推荐，下方有二维码)，我会立马反馈和修复相关Bug。

🔨示例

查看帮助

bruce 或 bruce -h
查看版本

bruce -v
切换语言

bruce l
进入文件夹

cd projectList
初始项目

bruce i
进入项目根目录

cd myProject
构建项目

bruce b
建立组件(构建项目时需另起一个cmd窗口执行)

bruce n
删除依赖

bruce r

📝待作

增长bruce eject命令，用于开发者自定义bruce-cli的配置

⏳后记

本项目源于我2017年3月份一个Angular项目里的构建代码，从最开始的Webpack2一直迭代到今天的Webpack4，话说Webpack5过段时间就要出了。

最初个人构思是写一份构建代码模板存放在Github上，而后经过脚本把构建代码拉下来。但是这样构建代码和业务代码仍是同时存放在一个文件夹里，不容易管理，文件又多又杂。下次新开项目时又要把构建代码复制过去，有时升级构建功能，为了保持构建功能的统一，须要同时修改几个项目里的构建代码，妈的真烦。既然这样，为何不把那些通用的构建代码抽出来作成一个npm模块呢，这样一次安装全局运行，多爽呀！

2018年3月我就开始对这个项目进行升级改造，作成一个npm模块，只不过一直在本身的电脑里跑。由于还没怎样应用到项目里，因此也不敢开源。通过差很少1年大大小小20多个项目的应用，终于稳定了这个项目的功能，因此我也决定对bruce-cli进行开源。对于全部经过bruce-cli建立的项目均可以开箱即用全部构建功能，如无特殊需求甚至是零配置便可运行项目。

开发这个项目经历了不少，挖的坑不少，填的坑也不少，很苦很累，有段时间还常常熬夜就是为了把它作得更好。不过收获也很大，学习了不少新知识新技能，把经常使用的Node知识都用上了，也为本身后期作Node服务端开发打下了巩固的基础。有付出就有收获，我仍是一直深信这句话，由于本身确实进步了不少。

本项目是基于Node10和Node11进行开发的，为了兼容Node8+，因此使用了babel对源码进行了编译，生成如今线上版本的代码，待更多的项目测试完成和应用起来后会开放源码供你们一块儿学习和完善。若是在后续使用本项目时发现Bug或产生疑问，能够随时Issues或经过WeChat联系我。使用时记得查看文档哟，详情请戳这里，喜欢的能够给个Star。

专栏文章

原文：请戳这里
做者：JowayYoung
仓库：Github
博客：掘金、思否、知乎
公众号：Uzero
联系我：关注公众号后有个人微信哟

《灵活运用》系列

灵活运用CSS开发技巧强烈推荐收藏👍
灵活运用JS开发技巧强烈推荐收藏👍
灵活运用PS切图技巧强烈推荐收藏👍

《依赖汇总》系列

NPM依赖：构建编译强烈推荐收藏👍
NPM依赖：框架平台强烈推荐收藏👍
NPM依赖：类库工具强烈推荐收藏👍

《必备工具》系列

Cmder&iTerm美化你的终端强烈推荐收藏👍

《随笔》系列

关注公众号Uzero，更多前端小干货等着你喔！我是JowayYoung，喜欢分享前端技术和生活纪事，学习与生活不落下，天天进步一点点，与你们相伴成长