自定義 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