在实际项目中开发者很少会从0到1配置一个项目，基本上都是利用脚手架快速构建项目。但是，随着脚手架工具越来越丰富，开发者在各个脚手架之间不断切换，忽略了脚手架内部实现了哪些功能。特别是，Vue的脚手架从Vue2的vue-cli(基于webpack实现)切换到Vue3的vite后，基于 Webpack5 配置 Vue3能够帮助我们更好地理解 vite 内部做了哪些事情。

1、准备工作

1.1 创建目录结构

创建文件夹 & 初始化

// 在终端中依次执行以下命令
mkdir vue-jest
cd ./vue-jest
npm init -y

1.2 安装基本依赖

npm i vue
npm i @vue/compiler-sfc vue-loader -D
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm i style-loader css-loader -D
npm i babel-loader @babel/core @babel/preset-env  -D

vue-loader

Vue Loader 是一个 Webpack 的 loader，它允许你以一种名为单组件（SFCs）的格式撰)写 Vue 组件：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

@vue/compiler-sfc

这个包本身提供额处理 Vue 单文件的底层工具，它被用在 vue-loader, rollup-plugin-vue 和 vite。

1.3 创建目录结构

- public
    - index.html
- src
    - App.vue
    - index.js
webpack.config.js
babel.config.js
package.json

1.4 配置 `webpack.config.js` & `babel.config.js`

webpack.config.js

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {} = require('vue-loader');

module.exports = {
    mode: 'development',
    entry:'./src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, './dist'),
        clean: true,
    },
    module: {
        rules:  [
            {test: /\.vue$/, loader: 'vue-loader'},
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
        ],
    },
    devtool: 'source-map',
    devServer: {
        port: 8089,
        hot: true,
    },
    plugins: [,
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
        })
    ],
}

babel.config.js

// babel.config.js

module.exports = {
    prestes: [['@babel/preset-env',{targets: {node: 'current'}}]],
}

在 package.json 中创建命令

// package.json

"scripts":{
    "dev": "webpack serve"
}

执行 npm run dev 启动项目并访问页面。

至此，一个简单的基于 vue3 和 webapck5 的项目配置成功。

2、支持 jsx

2.1 下载依赖

npm i @vue/babel-plugin-jsx -D

2.2 修改 `webpack.config.js` 和 `babel.config.js`

webpack.config.js
添加 .jsx 文件的处理 loader

// webpack.config.js

module: {
    rules: [
       // 处理 jsx 文件
      {
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: ["@vue/babel-plugin-jsx"],
          },
        },
      },
    ]
}

babel.config.js
添加 plugins 配置

// babel.config.js

"plugins": ["@vue/babel-plugin-jsx"]

配置完成后，该项目就支持 JSX 语法了。

2.3 创建 jsx 组件

两种 jsx 组件书写形式：

Foo.jsx

export default {

  setup(props, { slots }) {
    return {
      slots,
    };
  },
  render() {
    return <h1>{this.slots.default && this.slots.default()}</h1>;
  },
};

Bar.vue

// 注意 `script` 标签需要添加 `lang="jsx"` 的声明
<script lang="jsx">
export default {
  render() {
    return <h1>Hello world</h1>;
  },
};
</script>

之后，上述两个组件就可以在 App.vue 使用。

3、Jest 测试框架引入

3.1 下载依赖

npm i jest jest-environment-jsdom babel-jest @vue/test-utils @vue/vue3-jest -D

3.2 初始化 `jest.config.js`

npx jest --init

上述命令执行后，项目根目录生成了 jest.config.js 文件。然后，在该文件进行配置。

// jest.config.js
testEnvironment: "jest-environment-jsdom",
testEnvironmentOptions: {
    // 解决 `ReferenceError: Vue is not defined import { mount } from "@vue/test-utils";` 报错
    "customExportConditions": [
      "node",
      "node-addons"
    ]
},
transform: {
    // 用 `vue-jest` 处理 `*.vue` 文件
    ".*\\.(vue)$": "@vue/vue3-jest",
    // 用 `babel-jest` 处理 `.jsx` 或 `.js` 文件
    "\\.[jt]sx?$": "babel-jest",
   
},

3.3 在 `package.json` 创建命令

// package.json

"scripts": {
    "test": "jest"
}

4、完整的 `package.json`

{
  "name": "webpack-vue-jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@babel/core": "^7.22.9",
    "@babel/preset-env": "^7.22.9",
    "@vue/babel-plugin-jsx": "^1.1.5",
    "@vue/compiler-sfc": "^3.3.4",
    "@vue/test-utils": "^2.4.1",
    "@vue/vue3-jest": "^29.2.4",
    "babel-jest": "^29.6.2",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.5.3",
    "jest": "^29.6.2",
    "jest-environment-jsdom": "^29.6.2",
    "vue-loader": "^17.0.1",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}