reactjs - Build React app 生成带有块后缀的静态文件
问题描述
我使用以下命令创建了一个反应应用程序 npx create-react-app my-app
现在,当我使用以下命令构建生产应用程序时 npm run build
它生成以下带有后缀的文件。
build\static\js\1.82dafdb5.chunk.js
build\static\js\runtime~main.229c360f.js
build\static\js\main.a27c0d6d.chunk.js
build\static\css\main.c2586263.chunk.css
我正在寻找如何避免文件名中的随机数和块后缀。有什么方法可以只导入一个 js 文件,而不是导入三个 js 文件,我可以导入一个 js 文件。
解决方案
经过一番挖掘后,我找到了适用于 Windows 的以下解决方案。
安装:
npm i --save-dev renamer replace-in-file
并用这些替换 package.json 构建
{
"build": "react-scripts build && npm run build-rename",
"build-rename": "npm run build-rename-js && npm run build-rename-css && npm run build-fix-references",
"build-rename-js": "renamer --find \"/main\\.[^\\.]+\\./i\" --replace \"main.\" build\\static\\js\\*",
"build-rename-css": "renamer --find \"/main\\.[^\\.]+\\./i\" --replace \"main.\" build\\static\\css\\*",
"build-fix-references": "npm run build-fix-sourcemap && npm run build-fix-index && npm run build-fix-serviceworker && npm run build-fix-assetmanifest",
"build-fix-sourcemap": "npm run build-fix-sourcemap-js && npm run build-fix-sourcemap-css",
"build-fix-sourcemap-js": "replace-in-file \"/sourceMappingURL=main\\.[^\\.]+\\.js\\.map/i\" \"sourceMappingURL=main.js.map\" build/static/js/main.js --isRegex",
"build-fix-sourcemap-css": "replace-in-file \"/sourceMappingURL=main\\.[^\\.]+\\.css\\.map/i\" \"sourceMappingURL=main.css.map\" build/static/css/main.css --isRegex",
"build-fix-index": "npm run build-fix-index-js && npm run build-fix-index-css",
"build-fix-index-js": "replace-in-file \"/main\\.[^\\.]+\\.js/i\" \"main.js?v=%npm_package_version%\" build/index.html --isRegex",
"build-fix-index-css": "replace-in-file \"/main\\.[^\\.]+\\.css/i\" \"main.css?v=%npm_package_version%\" build/index.html --isRegex",
"build-fix-serviceworker": "npm run build-fix-serviceworker-js && npm run build-fix-serviceworker-css",
"build-fix-serviceworker-js": "replace-in-file \"/main\\.[^\\.]+\\.js/i\" \"main.js\" build/service-worker.js --isRegex",
"build-fix-serviceworker-css": "replace-in-file \"/main\\.[^\\.]+\\.css/i\" \"main.css\" build/service-worker.js --isRegex",
"build-fix-assetmanifest": "npm run build-fix-assetmanifest-js && npm run build-fix-assetmanifest-css && npm run build-fix-assetmanifest-js-map && npm run build-fix-assetmanifest-css-map",
"build-fix-assetmanifest-js": "replace-in-file \"/main\\.[^\\.]+\\.js/i\" \"main.js\" build/asset-manifest.json --isRegex",
"build-fix-assetmanifest-css": "replace-in-file \"/main\\.[^\\.]+\\.css/i\" \"main.css\" build/asset-manifest.json --isRegex",
"build-fix-assetmanifest-js-map": "replace-in-file \"/main\\.[^\\.]+\\.js\\.map/i\" \"main.js.map\" build/asset-manifest.json --isRegex",
"build-fix-assetmanifest-css-map": "replace-in-file \"/main\\.[^\\.]+\\.css\\.map/i\" \"main.css.map\" build/asset-manifest.json --isRegex"
}
推荐阅读
- ios - 有大量单元格时删除和插入行崩溃
- c# - 禁用 chrome 作为多进程。Chrome 版本 68 无法捕获 URL
- facebook - 无法读取未定义的属性“logInWithReadPermissions”,但存在 LoginManager
- jpa - 为什么在看到 PersistentBag 的实体中使用 JPA 列出(@OneToMany)
- jquery - Bootsrap 菜单锚点仅在滚动到部分中间后激活
- android - 是否可以使用 IMPORTANCE_DEFAULT 创建一个通知频道(奥利奥),但不会播放任何声音?
- python - 如何使用 pybabel 获取特定语言的翻译
- angular - 添加图层组以按名称进行映射和更新
- postgresql - 如何在 PostgreSQL 中找出碎片索引并对其进行碎片整理?
- java - 从 ANTLR 中的语法规则调用方法?