环境搭建日志之create-react-app unable pwa
create-react-app创建的项目,会默认添加Progressive Web Apps(以下简称
pwa
)的环境,即使serviceWorker.unregister()也会生产环境中输出相应文件。本文主要介绍有洁癖不打包输出pwa
相关内容,主要是不eject的情况下怎么做(面向谷歌编程没有结果后的结果)。
asset-manifest.json不和pwa
直接相关,但作为例子一并去除。
还原问题
准备一个cra基础环境,并添加好customize-cra
,这里直接使用react-env
yarn build
打包看看情况:
多了pwa
的一些东西。
分析pwa配置
思路:在webpack配置文件下找到pwa
相关扩展项位置,然后在customize-cra
配置修改项目找到对应位置将其修改或删除。
准备一个cra创建的备用环境并暴露出webpack配置:
shell
# 创建
yarn create react-app my-app
# cd my-app
yarn eject
下一步,打开config目录找到webpack.config.js,在里面检索plugins
关键词,
多出来的文件有asset-manifest.json、precache-xxx.js和service-worker.js,讲名称作为关键词检索位置:
两个扩展配置位于plugins
数组中,由于react-scripts
版本不同,可能位置也会不同,下面去没有eject
的环境中找到对应位置。
删除相关配置项
查看webpack配置项
js
const addCustomize = () => (config) => {
// 输出配置项目
console.log(config.plugins)
return config
}
两个配置分别位于7、9位置,将其删除即可。
delete
删除数组会留空,所以使用splice
js
const addCustomize = () => (config) => {
// 删除ManifestPlugin配置,不生成asset-manifest.json
config.plugins.splice(6, 1)
// 删除WorkboxWebpackPlugin配置,不使用pwa
config.plugins.splice(7, 1)
return config
}
现在yarn build
就不会产生其它文件了
写在最后
此方法是没有找到配置项的不保险操作,如有相关快捷配置,期待你的留言!???