React 项目统一打包框架

项目目录结构

├── bin                                              // package.json中配置的 bin 目录
├── config                                           // webpack 配置目录
│   ├── webpack                                      // webpack 服务器和缓存目录
│   │   ├── persistentCache                          // webpack 缓存目录
│   │   └── index.js                                 // webpack 启动服务器文件
│   ├── dev.server.js                                // webpack dev server 配置文件
│   ├── config.json                                  // 版本配置文件
│   ├── env.js                                       // webpack 环境变量配置文件
│   ├── paths.js                                     // webpack 常量配置文件
│   └── webpack.config.js                            // webpack 默认配置文件
├── copy                                             // webpack 初始化文件拷贝目录
│   ├── common                                       // 通用文件
│   ├── mobile                                       // 手机端文件
│   └── pc                                           // PC 端文件
├── example-config                                   // 案例配置
│   ├── config.js                                    // 框架所需要的配置
│   └── proxy.json                                   // webpack dev server 中的 proxy 配置
├── scripts                                          // 打包文件
│   ├── utils                                        // utils 类
│   ├── build.js                                     // 测试环境打包文件
│   ├── command.js                                   // 命令行文件
│   ├── eject.js                                     // 不使用框架打包, 直接在项目中生成打包配置的文件
│   ├── prod.js                                      // 生产环境打包文件
│   └── start.js                                     // 项目启动配置文件
│── .npmignore                                       // npm publish ignore 文件
├── package.json                                     // 项目依赖和常用脚本命令配置
└── README.md                                        // 项目使用说明文件

使用

  "start": "bale-react-service start --config=copy",
  "dev": "rimraf build && bale-react-service build --config=copy",
  "uat": "rimraf build && bale-react-service uat --config=copy",
  "prod": "rimraf dist && bale-react-service prod --config=copy",
  "clean": "bale-react-service --config=clean",
  "eject": "bale-react-service eject",
  "help": "bale-react-service --help",
  "eject": "bale-react-service eject",

插件列表

1. speed-measure-webpack-plugin 打包时间插件[https://www.npmjs.com/package/speed-measure-webpack-plugin]

2. 热更新插件 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh [https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin]

  npm install @pmmmwh/react-refresh-webpack-plugin react-refresh

• babel-loader 下 plugins 中添加 require.resolve('react-refresh/babel')
• start.js 中添加

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
new ReactRefreshWebpackPlugin() // `plugins` 中添加

3. mini-css-extract-plugin 提取css 插件。[https://www.npmjs.com/package/mini-css-extract-plugin]

4. html-webpack-plugin html 插件[https://www.npmjs.com/package/html-webpack-plugin]

5. inline-chunk-html-plugin 对于一些导出较小的 runtime 文件，直接注入 html 文件中而减少一次请求提高速率。[https://www.npmjs.com/package/inline-chunk-html-plugin]

6. copy-webpack-plugin 文件拷贝插件[https://www.npmjs.com/package/copy-webpack-plugin]

7. purgecss-webpack-plugin 去除未使用的 css。 [https://github.com/FullHuman/purgecss] [https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-webpack-plugin]

8. progress-bar-webpack-plugin 进度条插件[https://www.npmjs.com/package/progress-bar-webpack-plugin]

9. image-minimizer-webpack-plugin 图片压缩插件[https://github.com/webpack-contrib/image-minimizer-webpack-plugin]

10. compression-webpack-plugin 代码压缩插件[https://www.npmjs.com/package/compression-webpack-plugin]

11. workbox-webpack-plugin 离线缓存插件[https://github.com/GoogleChrome/workbox]

12. preload-webpack-plugin 预加载插件[https://github.com/GoogleChromeLabs/preload-webpack-plugin]

13. css-minimizer-webpack-plugin css 优化和压缩插件[https://www.npmjs.com/package/css-minimizer-webpack-plugin]

14. webpack-bundle-analyzer 打包分析插件[https://www.npmjs.com/package/webpack-bundle-analyzer]

15. terser-webpack-plugin 处理 js 的压缩和混淆插件[https://www.npmjs.com/package/terser-webpack-plugin]

说明

@babel/preset-env 中 useBuiltIns:

// 此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill
"useBuiltIns": false

// 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import '@babel/polyfill'，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。
"useBuiltIns": "entry",
"corejs": 2,

// 这里需要指定 core-js 的版本, 如果 "corejs": 3, 则 import '@babel/polyfill' 需要改成
import 'core-js/stable'
import 'regenerator-runtime/runtime'

// usage 会根据配置的浏览器兼容，以及代码中用到的 API 来进行 polyfill，实现了按需添加。
"useBuiltIns": "usage",
"corejs": 2,

npm link

1. 安装

• 在 package.json 中的 bin 下配置目录 "bale-react-service": "./bin/index.js"
• 在项目 bin 目录下新建 index.js 文件
• 通过 npm link 可以把包 link 到全局

2. 执行 在需要使用的项目下执行 npm link bale-react-service, 则会把包安装到 node_modules 中

3. 验证 在 bale-react-service 项目下执行命令 npx bale-react-service

发布到私服

npm login
npm publish --access public # 公开