React 发现无webpack相关的配置的目录,进行创建, 安装插件需要进行配置
react脚手架将webpack相关的配置隐藏
起来了,如果想要看到webpack
的配置可以执行package.json
文件中的一个脚本:“eject”: “react-scripts eject”
,操作不可逆
关于eject
eject 命令是 Create React App(CRA)
(脚手架)提供的一个命令
,用于将项目的配置从隐藏
状态“弹出
”到可编辑
的状态。
create-react-app文档
执行npm run eject命令会将react-scripts释放
到本地项目中,可以通过修改对应的文件完成配置。同时会删除react-scripts依赖包
,修改package.json中命令。命令执行完毕以后,我们就会看到本地项目中多出
了scripts
和config
两个目录文件。同时,package.json
文件命令
也被修改
了。
与上述图片
对比
此时,如果在执行启动
或者打包
命令,就是直接执行
的scripts目录下对应的文件了。我们可以很方便的根据需要修改对应的文件配置
即可。
但值得注意
的是,npm run eject命令是不可逆
的,即执行之后不可恢复
,这就造成了如果后续我们想通过脚手架的react-scripts包增加新的特性,比如PWA支持,是不可行
的
配置
1、使用eject命令暴露封默认的安装包解析
npm run eject
或
yarn eject
这个操作是永久的,暴露出来之后无法还原
Are you sure you want to eject? This action is permanent.
如果原来项目有修改,那么会有提示暂存到本地的git仓库
2.暴露之后的目录以及相关内容解析
分析
文件夹中会新增
config和scripts文件,package.json文件可以看到项目的依赖项dependemcies和 script配置发生了变化,以及添加了jest的配置
eject的副作用:
1、如果后续的cra更新了并添加了很多不错的功能,如果想应用到自己的项目中,可以通过更新cra版本来实现,而不是更新webpack的配置,但是如果已经对项目进行了eject操作,那么就无法很好的迎接未来
2、(注意
) 对于代码洁癖的人来说不是很友好,因为eject之后,package.json文件会被写入很多依赖项
,还有其他的脚本和配置文件
3、如果你有多个项目都是eject的,那么修改配置,可能会大量的复制粘贴,因为大多数情况下,项目的配置(比如webpack和babel)都是相同的
webpack.config.js 文件 配置less
//引入 less 文件的配置
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;
替代方案
使用react-app-rewired + customize-cra或@craco/craco