npm package: @bale-tools/vue-service
Description: Vue project packaging framework, using available configuration files.
Author: ztyjr88
Latest version: 1.1.8
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 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                                        // 项目使用说明文件
```

## 使用

```shell
  "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]
   [https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-webpack-plugin]

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 # 公开
```