Maintenance is the lifeline of a scaffold

I’m sure many people are capable of writing scaffolding that works best today, but ask yourself a year from now when Webpack is up 5, typescript is up 4, Babel is up 8, and ESLint is up 6, will you have the heart to update and maintain compatibility? In fact countless scaffolds have died in time (open source) or continue to languish (internal).

So when you see “Throw away the Create React App and build your own React generator!” While giving a thumbs up to yunyun’s title, I hope readers who are planning to build their own wheels will think twice, and I’d like to remind you of something you’ve recently learned: you can write your own scaffolding without ditching the CRA.

So, How?

See this issue and this tutorial for details. In short, it is

  1. Fork a copy of the create-react app library
  2. Enter thepackage/react-scriptsModify to your own custom templates and Settings:
    • config/webpack.config.jsModify the WebPack configuration
    • scripts/init.jsModifying the command line
    • templateModify the template
    • package.jsonChange the template name, version number, etc
  3. npm publishPublish the modifiedreact-scripts
  4. Run this command:
create-react-app my-app --scripts-version my-react-scripts-fork
Copy the code

Where my-react-scripts-fork is the name of the NPM package you published. To generate a customized version of the Starter Kit.

The upside?

Occasionally pull the create-React-App official Master branch and let Facebook maintain the scaffolding for you. You only need to maintain the template and custom configuration parts.

create-umi

This operation also applies to most NPM packages that generate CLI with scaffolding that starts with create-such as Alipay’s background system scaffolding Umi.js that has its CLI, create-umi. Umi has provided 5 initial templates, but if you want to make your own, fork create-UMI and use 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;
Copy the code

Change the URL parameter of gitArgs to your own template library.