尝试自己搭建一个完整的 webpack+Vue3+TS 的项目

项目中的代码规范配置

eslint
prettier
husky

eslint+prettier+lint-staged

1.安装

# lint-staged一般用在pre-commit的时候启用代码格式校验 配置文件.lintstagedrc.json
# eslint 代码校验插件 配置文件.eslintrc.js
# prettier 代码格式化规则插件 配置文件.prettierrc
yarn add lint-staged eslint prettier -D

2. 初始化

详见：juejin.cn/post/703814…

eslint可以直接npx eslint --init初始化出来一个配置
- 初始化的时候可以选择很多拓展配置，比如：
  - TypeScript
  - vue
集成prettier
- npm i prettier eslint-config-prettier eslint-plugin-prettier -D
- 在.eslintrc 中,extend中添加 "prettier" 解决 eslint 和 prettier 的冲突
- 创建.prettierrc
  - ```
  // 自己配置
  {
    "semi": false,
    "tabWidth": 2,
    "trailingComma": "none",
    "singleQuote": true,
    "arrowParens": "avoid"
  }
```
lint-staged是一个命令，一般在git hooks执行来做一些操作，通过之后才能下一步骤
- 配置lint-staged文件

以上是关于代码语法和格式化的配置

husky拦截git hooks

Git 有很多的 hooks, 让我们在不同的阶段,对代码进行不同的操作,控制提交到仓库的代码的规范性,和准确性, 以下只是几个常用的钩子

pre-commit: 提交的代码规范
- 描述: 通过钩子函数,判断提交的代码是否符合规范
commit-msg: 提交的信息规范
- 描述: 通过钩子函数,判断 commit 信息是否符合规范
pre-push: 提交的代码影响
- 描述: 通过钩子,执行测试,避免对以前的内容造成影响

第一步安装husky

yarn add husky -D
接着执行 npm set-script prepare "husky install" 之后，可以在package.json文件的scripts配置项中看到 "prepare": "husky install"
继续执行 yarn prepare之后，可以在项目的根目录下看到多了如下图所示的目录：

husky准备好之后就添加commitlint

执行yarn add @commitlint/cli @commitlint/config-conventional -D安装commitlint相关依赖，用来帮助我们在多人开发时，遵守 git 提交约定。

执行echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js在根目录创建 commitlint.config.js 文件（当然也可以手动创建此文件），其内容如下所示：

module.exports = {
  extends: [
    "@commitlint/config-conventional"
  ],
  // 以下时我们自定义的规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
        'feat', // 新功能（feature）
        'fix', // 修补bug
        'docs', // 文档（documentation）
        'style', // 格式（不影响代码运行的变动）
        'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
        'merge' // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
      ]
    ]
  }
};

#### 添加钩子

添加commit-msg

```shell
yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'

会看到在根目录的.husky文件夹下多了一个 commit-msg 文件，其内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn commitlint --edit "$1"

这个钩子在commit之前触发执行commitlint检查msg是否符合规范

接着添加pre-commit

yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1"'

会看到在根目录的.husky文件夹下多了一个 pre-commit 文件，其内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged --allow-empty "$1"

这个钩子是执行lint-staged检查工作区的文件格式和代码语法

webpack配置

初始化webpack配置

先要初始化package.json: npm init -y

先下webpack和webpack-cli: yarn add webpack webpack-cli -D

由于webpack-cli提供了命令行一键生成webpack配置，所以为了方便我们直接npx webpack init直接梭哈，可以见到提示:

[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'yarn add -D @webpack-cli/generators') (Y/n)

我们直接输入y回车就可以了

初始化过程中，可以选择使用语言是什么

接下来就是一些配置：

是否要devserver
快速创建html
PWA暂时不太明白，先不要后续再研究
样式选择sass
选择postcss
是否抽离css，选择只在生产环境抽离，当然它还有个重要的功能是压缩css减少构建包的体积
是否安装prettier
选yarn还是npm，一般选yarn

选择完了之后webpack-cli会生成package.json和原来package.json冲突了，原来最开始都不用npm init ，webpack-cli全部做好了

webpack对vue支持的配置

由于没用vue提供的vue-cli，我们查一下vue的官方文档：TypeScript 支持 | Vue.js

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /.tsx?$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/.vue$/],
        },
        exclude: /node_modules/,
      },
      {
        test: /.vue$/,
        loader: 'vue-loader',
      }
      ...

由于vue文件里面的<script lang="ts"> 也是需要ts-loader处理所以要加一个options的appendTsSuffixTo属性兼容.vue文件

appendTsSuffixTo 参考：关于ts-loader 中的 appendTsSuffixTo浅见

TypeScript集成

其实在webpack初始化的过程中选择ts的时候webpack-cli就已经帮我们做好了ts的的初始化：

我们可以在package.json里面看到typescript和ts-loader，默认用的是最新版
还生成了tsconfig.json

当然在这里默认配置不太行，需要查一下vue官网：TypeScript 支持 | Vue.js

其他的配置可以根据项目需求自行添加

对于vue文件里面使用scss在GitHub - microsoft/TypeScript-Vue-Starter: A starter template for TypeScript and Vue with a detailed README describing how to use the two together.中有这么一个配置：

但是我把这个这配置删了也能正常运行，那就暂且删了吧。。。。

路径别名配置

webpack和ts都要配置别名：react+ts+antd+webpack 配置别名alias - 简书

使用Vue

下载Vue yarn add vue@next
webpack解析Vue需要vue-loader和@vue/compiler-sfc(旧版为vue-template-compiler)插件yarn add vue-loader @vue/compiler-sfc -D
注册VueAPP

src /typings文件夹下添加 shims-vue.d.ts 文件，解决 vue 类型报错

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

代码兼容性

此项目代码使用tsc只支持语法转义，并没有垫片功能，如需要更好的兼容性还要添加babel

参考 Webpack5 搭建 Vue3 + TS 项目 - 掘金

webpack+Vue3+typescript搭建一个项目