浅析rescripts原理

刚开始使用react不久，大概小半年吧。项目还是用create-react-app创建的，翻遍了react-scripts的文档也没看到修改webpack的方法，唯一的方法是执行eject，这个显然不是我想要的。这个事情就这样搁置了。后面再学习微前端框架乾坤时无意中看到它的文档中有提到@rescripts/cli，就去了解了一下。大体操作是安装了rescripts包，并且使用rescripts替代react-scrtipt就能覆盖webpack配置。

我很好奇它是怎么做的，就去看了看它的源码。最终的结论是，它会读取react-scripts中的webpack配置，然后跟.rescripts.js中的配置进行合并，然后再把最终生成的webpack配置赋值给require.cache。最后再执行react-scripts，在react-scripts执行期间会去加载webpack配置，因为已经挂载到了require.cache上，所有就会使用合并过后的webpack配置。

放张图有说服力，哈哈
patch.js

这一下子打开了我的思路呀

今天突然发现使用rescripts也有修改不了的配置，比如devServer的port，虽然我可以这样写

// .rescriptsrc.js

module.exports = {
	devServer: (config) => {
		config.port = 8888;
		return config;
	}
}

但是就是不起作用，经过查阅react-scripts代码发现这段代码

我们在.rescriptsrc.js中改的port会被这里的port覆盖，这个port怎么来的呢？

优先使用DEFAULT_PORT，如果它已经被占用了，那就选一个别的。DEFAULT_PORT从哪里来？

好了，至此知道怎么改端口了，就是在执行rescripts start之前，设置一下环境变量PORT

set PORT=9911 & rescripts start

如果需要跨平台，那建议使用cross-env

如果对你有帮助，请帮忙点赞呀，嘻嘻