创建自定义CRA模版

2022年12月10日 • ... • ☕️ 2 min read

当脚手架类的项目做到一定阶段，会有一个比较稳定的版本，可以从这个版本生成目标项目，这时候通常有几种方法，比如创建一个目录，copy并修改关键配置，或者写一个脚本来完成这些copy操作。使用的CRA模版工具就属于这种类型。

目前需要的功能点：

根据projectName，copy模版文件到指定目录；
修改package.json信息；
执行install并启动项目

模版的目录，以下面格式划分

cra-template-[template-name]/
  README.md (for npm)
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

本地测试模版，用以下命令

npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name]

template目录会直接复制到app目录，gitignore会被重命名为.gitignore

最后生成的目录结构

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

像普通的app一样，直接进入my-app目录，执行npm/yarn start即可启动。

流程

命令创建使用的命令行，需要指定项目名称和目标目录。

cross-env PROJECT_NAME=@some/proj DIR=path/to/proj ts-node ./scripts/createProject.ts

copy文件

  
  const projectRoot = 'root/to/projects/'
  const dir = process.env['DIR'] || ''
  const templateDirName = 'path/to/template'

  shell.rm('-rf', `${projectRoot}${dir}`)
  shell.mkdir('-p', `${projectRoot}${dir}`)
  shell.cp(
    '-Rf',
    templateDirName,
    `${path.resolve('./', projectRoot, dir)}`
  )

修改package.json 由于package.json本质上是个json文件，所以直接requrie即可以得到json格式的数据。之后根据key和value做修改即可以。

  const packageJson = require(pkgPath)
  // 添加name和lint-staged属性
  packageJson['name'] = opts['name']

  packageJson['lint-staged'] = {
    '*.{js,ts,tsx,jsx}': ['eslint'],
    '*.{json,md,html,js,jsx,ts,tsx}': ['prettier --write'],
  }
  fs.writeFileSync(pkgPath, JSON.stringify(packageJson))
  // prettify文件
  shell.exec(`cd ${dir} && pnpm run prettify -- package.json`, { silent: true })

执行构建并运行

  shell.exec(`cd ${dir} && pnpm install && pnpm start`, { silent: false })