一個零配置開箱即用的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`進行覆蓋

🔖版權

MIT © Joway Young

本項目由本人獨自開發，通過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。