如何寫一套React腳手架，並讓Facebook幫你維護

維護是一個腳手架的生命線

相信不少人都有能力寫如今最好用的腳手架，但捫心自問當一年後 Webpack 升了5，typescript 升了4，babel 升了8，eslint 升了6，有這個心力去更新維護兼容嗎？事實上無數腳手架都死在時光裏(開源的)，或者繼續苟且着(內部使用的)。

因此當看到「扔掉Create React App，打造你本身的React生成工具！」 云云的標題時，點個讚的同時，也但願打算本身造輪子的讀者能慎重考慮，而且，想科普一下最近才學到的一個事兒，就是：你能夠不丟棄CRA，寫一套本身的腳手架。

因此說，How？

詳細能夠參見 這個issue, 和 這篇教程。簡單的說，就是

1. fork 一份 create-react-app 庫
2. 進入 package/react-scripts 修改爲本身定製的模板和設置:
   • config/webpack.config.js 修改 webpack 配置
   • scripts/init.js 修改命令行
   • template 修改模板
   • package.json 更改模板名稱，版本號等
3. npm publish 發佈修改後的 react-scripts
4. 跑這個命令：

create-react-app my-app --scripts-version my-react-scripts-fork
複製代碼

其中 my-react-scripts-fork 是你發佈的 npm 包名。便可生成定製版的starter kit。

好處呢？

時不時地去拉一下 create-react-app 官方 master 分支，讓Facebook幫你維護腳手架。本身只須要維護模板和定製配置部分。

create-umi

這個操做還適用於大多數以 create- 開頭的腳手架生成cli的npm包，好比支付寶的後臺系統腳手架 Umi.js 有它的cli，create-umi。Umi 已經提供了5套初始模板，但若是你但願本身定製一套模板，能夠如法炮製，fork一份 create-umi 並參照 lib/generators/ant-design-pro/ 裏的寫法：

const chalk = require('chalk');
const BasicGenerator = require('../../BasicGenerator');

class AntDesignProGenerator extends BasicGenerator {
  async writing() {
    const path = this.opts.name || './';
    const gitArgs = [
      `clone`,
      `https://github.com/umijs/ant-design-pro`,
      `--depth=1`,
      path,
    ];
    console.log(`${chalk.gray('>')} git ${gitArgs.join(' ')}`);
    await require('execa')(
      `git`,
      gitArgs,
    );
  }
}

module.exports = AntDesignProGenerator;
複製代碼

將 gitArgs 的 url 參數改爲你本身的模板庫便可。