浅析rescripts原理

原创已于 2022-09-20 11:41:50 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #前端框架

于 2022-08-16 19:15:33 首次发布

前端之路专栏收录该内容

39 篇文章

订阅专栏

本文介绍了作者在使用React时遇到的修改webpack配置的挑战，特别是如何更改devServer端口的问题。通过探索@rescripts/cli，作者发现可以利用该工具覆盖react-scripts的默认配置。然而，当尝试修改devServer端口时，发现在.rescriptsrc.js的配置被其他代码覆盖。深入react-scripts源码后，了解到端口设置会被一个名为DEFAULT_PORT的值影响。解决办法是在运行rescriptsstart之前设置环境变量PORT。文章提供了跨平台设置端口的建议，并强调了学习源码对于解决问题的重要性。

刚开始使用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