自定义 create-react-app

引子

使用 create-react-app 的时候，若是想要更改一些配置，一种方式是使用 eject 指令，但这样可能就没法同步后续的更新。另一种方式是使用 react-app-rewired 覆盖对应的配置，这种方式有些没法依然设置。更好的方式是直接基于原构建脚本进行自定义修改，又方便同步后续更新。

• Origin
• My GitHub

简介

create-react-app 里面包含了多个不一样的库，使用了 Lerna 进行管理。构建的相关脚本主要在 react-scripts 中。经过 Fork 的方式发布本身的版本，也能够同步官方的版本。

操做

1 Fork

登陆 GitHub 的帐号，Fork create-react-app 。更加详细的说明见 Fork a repo 。

2 修改对应库

Fork 后，克隆对应的库到本地。在修改以前，建议基于发布的分支，建立一个本身的修改分支。下面做为示例，在 /packages/react-scripts/scripts/init.js 中添加一些打印日志。

3 发布包

因为是 Fork 过来的包，里面的 package.json 的一些描述信息须要修改。至少里面的 name 字段值须要更改一下，示例的名称改成 customize-react-scripts 。其它描述信息，根据实际状况判断是否须要进行修改。

npm login
npm publish

发布包详细说明见 这里 。

4 使用自定义包

发布成功后，到一个目录下，执行下面的命令：

npx create-react-app test-app --scripts-version customize-react-scripts

可看到下面的信息提示。

安装成功后，能够看到前面添加的提示信息。

参考资料

• Alternatives to Ejecting
• Customizing create-react-app: How to Make Your Own Template