打造本身的 Create-React-App

時間 2019-11-07

標籤打造本身 create react app 欄目 React 简体版

原文原文鏈接

做爲前端開發者，如今已經有足夠多的腳手架可供選擇。官方的有 create-react-app, vue-cli, @angular/cli 等，老牌腳手架工具 Yeoman，各開發者定製腳手架更是不勝枚舉。但每一個人、每一個團隊使用的技術棧並不徹底相同，所以市面上的腳手架大抵分兩類：要麼只包含基本功能，要麼就大而全。想找到徹底適合的腳手架並不容易。javascript

前幾天看到一篇文章說，要成爲中高級前端就要學會定製本身的腳手架工具。我十分贊成，特別是做爲 Leader，爲團隊定製合理的模板能夠有效提升團隊的工做效率。html

若是你使用過 create-react-app，你可能會注意到 react-scripts 這個工具，它負責處理編譯打包相關工做。你沒必要再關注如何編寫 webpack.config.js 或者 .babelrc。但 create-react-app 甚至連路由庫都沒預置，所以項目建立後你仍要配置一大堆依賴。前端

對開發者而言，技術棧的變更一般不太頻繁。我但願制定模板的同時，能夠像 react-scripts 同樣忽略打包細節。現有的腳手架方案都不太知足個人要求，因而我寫了 Tacer。vue

按本身的技術棧，我寫了 4 個模板：java

react: React + TypeScript + Jest + styled-components
koa: Koa + TypeScript + Jest
lib: A library template for published to npmjs
bin: A binary template

只須要運行 npx tacer <template-name> [project-path] 就能夠快速搭建項目。node

建立模板

這些模板僅針對我我的喜愛定製，我依然相信量身定製纔是好的方案（就像定製耳機老是比公模耳機要舒服同樣）。react

爲方便自定義模板，Tacer 提供了一個模板的模板，Seed（種子）。下文假設咱們要定製一個使用 Electron 的模板。webpack

建立腳手架

npx tacer seed tacer-template-electron
# 你也能夠全局安裝 tacer
npm install -g tacer
tacer seed tacer-template-electron
複製代碼

tacer 支持兩種模板來源：git

公共來源：以 tacer-template- 爲前綴的 npm 包，可被全部人訪問
私有來源：Github, GitLab 及其它自建私有 Git 倉庫，其可見性由倉庫類型決定

所以，使用 react 模板建立項目，可使用兩種方式：github

npx tacer react project-path
npx tacer https://github.com/IdanLoo/tacer-template-react project-path
複製代碼

不管如何，命令執行完以後，咱們已經能夠看到 tacer-tepmlate-electron 的目錄結構了。

- bin
    - script.js # tacer-script 所在路徑，通常無需更改
- scripts # tacer-script 運行的命令
    - build.js # tacer-script build
    - start.js # tacer-script start
    - ... # 能夠在此處添加其它命令
- template # 模板所在路徑，需本身建立
複製代碼

命令

以 rollup 爲例，講解一下如何編寫 scripts。

// build.js
const rollup = require('rollup')
const autoExternal = require('rollup-plugin-auto-external') // 處理外部依賴
const typescript = require('rollup-plugin-typescript2') // 處理 TypeScript
const { terser } = require('rollup-plugin-terser') // 代碼壓縮
const { resolve } = require("path")

const workdir = process.cwd() // 工做目錄，即運行 tacer-script 的目錄，通常爲目標項目的根目錄
const entrypoint = resolve(workdir, 'src', 'index.js') // 項目入口，<workdir>/src/index.js
const output = resolve(workdir, 'dist', 'index.js') // 打包路徑， <workdir>/dist/index.js
// 緩存路徑，<workdir>/node_modules/tacer-template-electron/.cache
const cacheRoot = resolve(__dirname, '..', '.cache')

// 沒有參數
function build() {
    // 返回 Promise 對象以供其它命令調用
    return rollup({
        input: entrypoint,
        plugins: [
            autoExternal(),
            typescript({ cacheRoot }),
            terser()
        ]
    }).then(bundle => bundle.write({ file: output, format: 'cjs' }))
}

// 按 CommonJS 規範導出函數，以供 tacer-script 調用
module.exports = build
複製代碼

注意：tacer-script 在調用時沒有參數傳遞，咱們建議爲不一樣的命令編寫不一樣的文件，即便是 test:unit 及 test:e2e 這樣同屬於測試的命令，也應當編寫 test:unit.js 和 test:e2e.js 兩個文件。

注意：爲了保持精簡，咱們並未內置 Babel。所以在 ES Module 足夠流行以前，仍應使用 CommonJS 規範導出函數。

注意：你能夠須要閱讀打包工具的 JS API 以瞭解它們如何被 JavaScript 調用。這須要一點耐心。若是你使用的工具未提供 JS API（如 Jest）或者你更喜歡命令行調用形式，請使用 Spawn。

編寫模板

你能夠在腳手架目錄中新建一個 template 文件夾，從頭開始配置你的模板，也能夠複製任何現有的項目到腳手架目錄中並重命爲 template。按照你的喜愛，配置一個最小可運行的模板。

鏈接模板與腳手架

在模板目錄中執行

npm install --save-dev file:..
# or
yarn add -D file:..
複製代碼

腳手架會做爲 devDependency 安裝到 template/package.json 中。修改 package.json 的 scripts 屬性

{
    // ...
    "scripts": {
        "build": "tacer-script build",
        "start": "tacer-script start",
        // ... 其它你在腳手架中定義的命令
    },
    // ...
    "devDependencies": {
        "tacer-template-electron": "file:.." // 這個依賴在 tacer 運行時會自動處理成版本號或 Git 倉庫地址
    }
}
複製代碼