阅读 986

如何写一套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 参数改成你自己的模板库即可。

关注下面的标签,发现更多相似文章
评论