如何自定义 react-scripts (CRA) + 自定义 cra-template-*

2,673 阅读4分钟

第一次写文章,写的不好还请大佬们轻喷 (手动滑稽)

为什么要自定义 react-scripts

很多时候使用 react 官方推荐的 create-react-app(以下简称CRA) 创建的项目,需要拓展 webpack 时,只能选择 eject 或者通过第三方包 customize-cra + react-app-rewired 去实现,实现方法可以参考 antd高级配置。 但是 CRA 官方推荐的是自行修改 react-scripts 文件。

修改 react-scripts

  1. 在 github 上找到 create-react-app 仓库地址,然后将CRA fork到自己的仓库中,将代码 down 到本地。

  2. 找到目录 create-react-app => package => react-scripts,在这个目录中就可以为所欲为了。

    楼主在此修改了 webpack配置,增加了 lessantd的懒加载、moment替换成dayjs的plugins,删除了原有的sass,在这里就不多说 webpack的配置更改了,有兴趣的同学可以进来 楼主的仓库

  3. 自行修改(修改到自己满意为止)之后,需要修改 create-react-app => package => react-scripts => package.json 文件,需要修改其中的 namerepository.url,将 name修改为自己想要的包的名字,将repository.url修改到自己的仓库地址。

  4. 打开 命令行,cd 到 react-scripts 目录中,登录 npm (需要去npm创建账号,已有账号直接登录就行)

npm login
// 登录之后
npm publish
  1. 发布了包之后,就可以运行一下命令,创建属于你自己的 xx-react-scripts包了。
yarn create react-app 项目名称 --scripts-version xx-react-scripts
or
npx create-react-app 项目名称 --scripts-version xx-react-scripts
  1. 后续 CRA 官方更新后,可以手动去自己的仓库合并即可。

自定义 cra-template-*

每次使用 CRA 创建的项目都是官方的初始模板,需要自己修改很多东西,加第三方包等等。通过自定义 cra-tempalte-* 可以完美解决此问题,自己想要模板是什么样子的就是什么样子的。

  1. 在 github 上创建一个仓库(空仓库),仓库名称必须以 cra-template-* 命名,如 cra-template-acra-template-b等等,将仓库down到本地,然后在命令行执行 npm init,接下来就是一顿回车了。

  2. 打开项目,添加自己需要的文件。按照官方要求,必须要有一下文件

template.json :这是模板的配置文件。由于这是一项新功能,因此随着时间的推移将添加更多选项。目前,仅package支持密钥。该package键可让您提供要添加到新项目的任何键/值package.json,例如依赖关系(目前仅支持依赖关系)以及模板所依赖的任何自定义脚本。

template文件夹:里面的文件就是通过 CRA 创建后生成的项目文件,template.json的内容将会被写入到创建后的package.json文件中。

template/gitignore注意 这里是没有前面的 .的,在创建项目时,会被 react-scripts 转换成 .gitignore,就是 git的忽略文件。

template/public:原始模板的静态文件。

template/src:项目的入口,至少要有一个 index.js(or index.tsx)

  1. 总之,自己模板说需要的第三方依赖等等 就写到 template.json中,自己需要的模板结构和其他配置就写到 template文件中。

  2. 接下来就是之前的操作了,登录 npm,如果登录过了,可以不用登录。然后发布包,包的名称就是 项目根下面的 package.jsonname字段,同上修改 react-scripts,url修改为该项目的仓库地址,然后 npm publish 发布就ok了。

  3. 使用 CRA 创建自己的模板

// 如果你的包名称是 cra-template-a
yarn create react-app 项目名称 --template cra-template-a
or
yarn create react-app 项目名称 --template a // 可以省略前面的cra-template-,创建时会自动加上cra-template-

---
npx create-react-app 项目名称 --template cra-template-a
or
npx create-react-app 项目名称 --template a 
  1. 结合 自定义react-scripts + 自定义模板创建,命令有点长
yarn create react-app 项目名称 --scripts-version xx-react-scripts --template a
or
npx create-react-app 项目名称 --scripts-version xx-react-scripts --template a

这样就创建出修改过配置的自定义模板的项目了~~~

第一次写文章,语言组织能力十分有限啊,如有不懂的,可以评论,一一回复。