# 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. 作者

**novlan1**

## 2. 如何使用

安装

```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'],
});
```

## 3. 类型及默认参数

### 3.1. getWebpackBaseConfig 参数

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

| 属性 | <p style="width:180px">类型</p> | <p style="width:300px">说明</p> | <p style="width:300px">默认值</p> |
| --- | --- | --- | --- |
| port | `number` | 端口 | - |
| https | `boolean` | 是否使用 `https` | - |
| isUseVueLoader | `boolean` | 是否使用 `vue-loader` | `true` |
| isVue3 | `boolean` | 是否是 Vue3 项目 | `false` |
| useXSS | `boolean` | 是否使用 XSS 过滤，需要提前在 Vue 原型上挂载 `xss` 方法 | `true` |
| useIfDefLoader | `boolean` | 是否使用 [ifdef-loader](./webpack-loader-ifdef.html) | `true` |
| handleIfDefFiles | `Array<string>` | [ifdef-loader](./webpack-loader-ifdef.html) 要处理的文件 | `/(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` |
| usePMDNetworkV2 | `boolean` | 是否使用 `pmd-network-v2` 替代 `pmd-network` | `false` |

### 3.2. handleIfDefFiles

`handleIfDefFiles` 默认值如下：

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

### 3.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',
];
```

## 4. 常见问题

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

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

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

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

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

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

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

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

### 4.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}/`
```

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

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

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

## 5. 更新日志

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