create-react-app 工程，如何通过 eject 释放配置文件？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

如果大家看了苏南大叔的react-scripts初步分析文章，就可以知道：create-react-app的背后，隐藏着一个webpack。一般情况下来说，webpack是默默隐藏的幕后英雄，你不需要修改它的配置，只需要简单无脑使用即可。

但是！总是有人想要修改webpack配置的。那么，到底如何才能完成修改webpack配置这个需求呢？在本文中，苏南大叔提出了个解决方案。本文测试环境：mac+create-react-app@2.1.2。

解决方案

create-react-app本身的webpack配置文件存在于node_modules/react-scripts/目录下面，但是这个目录是node_modules/，里面的源码都是不建议修改的。create-react-app提供了一个命令，用于释放这些配置。命令是：

npm run eject

eject的翻译是：喷出，就是说把这些配置文件，从隐藏的位置给喷出来。这镜像，脑补一下很精彩。而且create-react-app并不推荐大家这么做，因为这个步骤无法逆转！

npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

解决方案

解决方案就是：执行下面的命令。执行之前，一定要做好备份工作，因为这个步骤不可逆转，也不是官方推荐执行的命令。

npm run eject

如果显示权限错误，请加上sudo。中间有个等待输入y继续的过程，请不要傻等，想好之后就要需要主动输入y。

? Are you sure you want to eject? This action is permanent. (y/N) 

执行完毕后，项目根目录下面就有config和scripts两个目录生成。同时，package.json里面的scripts，也更新了新的命令。

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
},

错误解决方案

This git repository has untracked files or uncommitted changes:
Remove untracked files, stash or commit any changes, and try again.

如果您碰到git相关的错误信息的话，可以参见下面这篇文字：

• https://newsn.net/say/react-error-git.html

注意事项

npm run eject之后，react-scripts命令就失效了哦。因为在node_modules/下面，都没有react-scripts/的目录了，它以另外的形式存在于这个项目里面了。这仅仅是个事物的变形转化，ta还在，以另外的形式存在。

相关链接

https://newsn.net/say/react-scripts-action.html

总结

看着多出来的两个文件夹：config/和scripts/，您就可以再定义修改相关的create-react-app的系统逻辑了。不过这并不是推荐操作，请知悉。

苏南大叔原创的react小白入门系列教程，可以通过下面的链接地址访问：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。