@bale-tools/vue-service v1.1.8

Vue 项目打包框架

项目目录结构

├── bin                                              // package.json中配置的 bin 目录
├── config                                           // webpack 配置目录
│   ├── config.json                                  // 版本配置文件
│   └── paths.js                                     // webpack 常量配置文件
├── copy                                             // webpack 初始化文件拷贝目录
│   └── common                                       // P通用文件
├── scripts                                          // 打包文件
│   ├── build.js                                     // 测试环境打包文件
│   ├── command.js                                   // 命令行文件
│   ├── prod.js                                      // 生产环境打包文件
│   └── start.js                                     // 项目启动配置文件
│── .gitignore                                       // git ignore 文件
│── .npmignore                                       // npm publish ignore 文件
├── package.json                                     // 项目依赖和常用脚本命令配置
└── README.md                                        // 项目使用说明文件

使用

  "start": "bale-vue-service start --copy",
  "dev": "rimraf build && bale-vue-service build --copy",
  "simulate": "rimraf build && bale-vue-service simulate --copy",
  "prod": "rimraf dist && bale-vue-service prod --copy",
  "clean": "bale-vue-service --clean",
  "eject": "bale-vue-service eject",
  "help": "bale-vue-service --help",
  "versions": "bale-vue-service --versions",

插件列表

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

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

3. html-webpack-plugin html 插件https://www.npmjs.com/package/html-webpack-plugin

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

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

6. purgecss-webpack-plugin 去除未使用的 css。 https://github.com/FullHuman/purgecss

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

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

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

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

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

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

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

14. 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-vue-service": "./bin/index.js"
• 在项目 bin 目录下新建 index.js 文件
• 通过 npm link 可以把包 link 到全局

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

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

4. 删除 npm unlink @bale-tools/vue-service

发布到私服

npm login
npm publish --access public # 公开