# Vue 项目基础配置

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/project-config-vue">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/project-config-vue">
  <img src="https://img.shields.io/npm/v/@plugin-light/project-config-vue">
  <img src="https://img.shields.io/npm/l/@plugin-light/project-config-vue">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

`webpack` 配置，适用于基于 Vue 的 `web` 项目。

## 1. 如何使用

安装

```bash
pnpm add @plugin-light/project-config-vue -D
```

在 `vue.config.js` 中添加如下设置：

```js
const { WEBPACK_BASE_CONFIG } = require('@plugin-light/project-config-vue');
const { merge } = require('webpack-merge');

module.exports = merge(WEBPACK_BASE_CONFIG, {
  transpileDependencies: ['press-ui'],
});
```

或者使用 `getWebpackBaseConfig` 方法：

```js
const { getWebpackBaseConfig } = require('@plugin-light/project-config-vue');
const { merge } = require('webpack-merge');

module.exports = merge(getWebpackBaseConfig({
  isUseVueLoader: true,
  isVue3: false,
  useXSS: true,
}), {
  transpileDependencies: ['press-ui'],
});
```

## 2. 类型及默认参数

### 2.1. getWebpackBaseConfig 参数

`getWebpackBaseConfig` 接收一个对象作为参数。[完整类型定义](https://github.com/novlan1/plugin-light/blob/master/packages/project-config-vue/src/types.ts)。

| 属性                  | 类型                     | 说明                                                  | 默认值                                                                                     |
| --------------------- | ------------------------ | ----------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| port                  | `number`                 | 端口                                                  | -                                                                                          |
| https                 | `boolean`                | 是否使用 https                                        | -                                                                                          |
| isUseVueLoader        | `boolean`                | 是否使用 vue-loader                                   | `true`                                                                                     |
| isVue3                | `boolean`                | 是否是 Vue3 项目                                      | `false`                                                                                    |
| useXSS                | `boolean`                | 是否使用 XSS 过滤，需要提前在 Vue 原型上挂载 xss 方法 | `true`                                                                                     |
| useIfDefLoader        | `boolean`                | 是否使用 ifdef-loader                                 | `true`                                                                                     |
| handleIfDefFiles      | `Array<string>`          | ifdef-loader 要处理的文件                             | `/(press-ui\|component\|press-plus\|@tencent\/pmd-).*(\.vue\|\.ts\|\.js\|\.css\|\.scss)$/` |
| terserPureFuncs       | `Array<string>`          | 打包去除 console 日志的方法                           | `['console.log', 'console.table']`                                                         |
| transpileDependencies | `Array<string>`          | 需要编译的第三方依赖                                  | -                                                                                          |
| shadowProjectMap      | `Record<string, string>` | 映射的项目                                            | -                                                                                          |
| customCdnUrls         | `Array<string>`          | 自定义的 cdn 链接，用于 externals                     | -                                                                                          |
| usePMDBusinessAlias   | `boolean`                | 是否使用 pmd-business alias                           | -                                                                                          |
| useWorkBoxPlugin      | `{}`                     | 是否使用 work-box                                     | -                                                                                          |
| lessAlias             | `boolean`                | 不加额外的 alias                                      | `false`                                                                                    |
| useUniSimpleRouterCDN | `boolean`                | 是否要将 uni-simple-router 设置外链 cdn               | `false`                                                                                    |
| outputDirMode         | `string`                 | 打包产物目录                                          | `dist/${VUE_APP_DIR}/static`                                                               |

### 2.2. handleIfDefFiles

`handleIfDefFiles` 默认值如下：

```ts
/(press-ui|component|press-plus).*(\.vue|\.ts|\.js|\.css|\.scss)$/;
```

### 2.3. transpileDependencies

`transpileDependencies` 默认值如下：

```ts
[
  'pmd-merchant-ui',
  'press-ui',
  'press-plus',

  'pmd-aegis',
  'pmd-app-info',
  'pmd-config',
  'pmd-location',
  'pmd-login',
  'pmd-network',
  'pmd-report',
  'pmd-tools',
  'pmd-types',
  'pmd-widget',
  'pmd-vue',
  'pmd-jsapi',
];
```

## 3. 常见问题

### 3.1. console 日志去除是如何做的，以及如何保留

生产环境下，即`process.env.NODE_ENV`为`production`时，默认去掉`console`日志，可以通过`terserPureFuncs`传递空数组来恢复显示。

注意同时去掉`babel`插件`transform-remove-console`。

### 3.2. 打包产物分析怎么做

当 `process.env.npm_config_report` 不为 `falsy` 时，本工具会使用 `webpack-bundle-analyzer` 插件，开发者可用来进行打包分析。

否则，在 `production` 模式下，保存打包分析产物到 `my-bundle-analyze.html` 文件中，可以在流水线中进行归档。

### 3.3. 调试模式怎么打开

当 `process.env.DEBUG_MODE` 不为 `falsy` 时，本工具会设置 `configureWebpack.optimization.minimize` 为 `false`，开发者可以用来进行产物的代码分析。

### 3.4. 业务中获取分支名等变量

流水线会注入以下环境变量：

```bash
# 分支
VUE_APP_BRANCH

# 发布人
VUE_APP_AUTHOR
```

业务可以参考下面的方式获取：

```ts
const CUR_BRANCH = (process.env.VUE_APP_BRANCH || 'develop').replace(/\//, '.');

const shareUrl = `https://foo/bar.${CUR_BRANCH}/`
```

### 3.5. 业务库中条件编译不生效

默认情况下，条件编译工具并不处理业务库代码，可以通过 `handleIfDefFiles` 字段调整配置，比如:

```ts
getWebpackBaseConfig({
  handleIfDefFiles: /(src|press-ui|component|press-plus|@tencent\/pmd-).*(\.vue|\.ts|\.js|\.css|\.scss)$/,
})
```

## 4. 更新日志

[点此查看](./CHANGELOG.md)