第一次写文章,写的不好还请大佬们轻喷 (手动滑稽)
为什么要自定义 react-scripts
很多时候使用 react
官方推荐的 create-react-app
(以下简称CRA) 创建的项目,需要拓展 webpack
时,只能选择 eject
或者通过第三方包 customize-cra
+ react-app-rewired
去实现,实现方法可以参考 antd高级配置。
但是 CRA 官方推荐的是自行修改 react-scripts 文件。
修改 react-scripts
-
在 github 上找到
create-react-app
仓库地址,然后将CRA fork到自己的仓库中,将代码 down 到本地。 -
找到目录
楼主在此修改了create-react-app
=>package
=>react-scripts
,在这个目录中就可以为所欲为了。webpack
配置,增加了less
、antd
的懒加载、moment
替换成dayjs
的plugins,删除了原有的sass
,在这里就不多说webpack
的配置更改了,有兴趣的同学可以进来 楼主的仓库。 -
自行修改(修改到自己满意为止)之后,需要修改
create-react-app
=>package
=>react-scripts
=>package.json
文件,需要修改其中的name
、repository.url
,将name
修改为自己想要的包的名字,将repository.url
修改到自己的仓库地址。 -
打开 命令行,cd 到
react-scripts
目录中,登录npm
(需要去npm创建账号,已有账号直接登录就行)
npm login
// 登录之后
npm publish
- 发布了包之后,就可以运行一下命令,创建属于你自己的
xx-react-scripts
包了。
yarn create react-app 项目名称 --scripts-version xx-react-scripts
or
npx create-react-app 项目名称 --scripts-version xx-react-scripts
- 后续
CRA
官方更新后,可以手动去自己的仓库合并即可。
自定义 cra-template-*
每次使用 CRA
创建的项目都是官方的初始模板,需要自己修改很多东西,加第三方包等等。通过自定义 cra-tempalte-*
可以完美解决此问题,自己想要模板是什么样子的就是什么样子的。
-
在 github 上创建一个仓库(空仓库),仓库名称必须以
cra-template-*
命名,如cra-template-a
、cra-template-b
等等,将仓库down到本地,然后在命令行执行npm init
,接下来就是一顿回车了。 -
打开项目,添加自己需要的文件。按照官方要求,必须要有一下文件
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)
-
总之,自己模板说需要的第三方依赖等等 就写到
template.json
中,自己需要的模板结构和其他配置就写到template
文件中。 -
接下来就是之前的操作了,登录
npm
,如果登录过了,可以不用登录。然后发布包,包的名称就是 项目根下面的package.json
的name
字段,同上修改 react-scripts
,url
修改为该项目的仓库地址,然后npm publish
发布就ok了。 -
使用 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
- 结合 自定义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
这样就创建出修改过配置的自定义模板的项目了~~~
第一次写文章,语言组织能力十分有限啊,如有不懂的,可以评论,一一回复。