在实际项目中开发者很少会从0到1配置一个项目，基本上都是利用脚手架快速构建项目。但是，随着脚手架工具越来越丰富，开发者在各个脚手架之间不断切换，忽略了脚手架内部实现了哪些功能。特别是，Vue的脚手架从Vue2的vue-cli(基于webpack实现)切换到Vue3的vite后，基于 Webpack5 配置 Vue3能够帮助我们更好地理解 vite 内部做了哪些事情。
1、准备工作
1.1 创建目录结构
创建文件夹 & 初始化
bash
// 在终端中依次执行以下命令
mkdir vue-jest
cd ./vue-jest
npm init -y1.2 安装基本依赖
bash
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 -Dvue-loader
Vue Loader 是一个 Webpack 的 loader，它允许你以一种名为单组件（SFCs）的格式撰)写 Vue 组件：
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 创建目录结构
json
- public
- index.html
- src
- App.vue
- index.js
webpack.config.js
babel.config.js
package.json1.4 配置 webpack.config.js & babel.config.js
- webpack.config.js
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
js
// babel.config.js
module.exports = {
prestes: [['@babel/preset-env',{targets: {node: 'current'}}]],
}- 在 package.json 中创建命令
json
// package.json
"scripts":{
"dev": "webpack serve"
}执行 npm run dev 启动项目并访问页面。
至此，一个简单的基于 vue3 和 webapck5 的项目配置成功。
2、支持 jsx
2.1 下载依赖
bash
npm i @vue/babel-plugin-jsx -D2.2 修改 webpack.config.js 和 babel.config.js
webpack.config.js添加.jsx文件的处理 loader
js
// 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配置
js
// babel.config.js
"plugins": ["@vue/babel-plugin-jsx"]配置完成后，该项目就支持 JSX 语法了。
2.3 创建 jsx 组件
两种 jsx 组件书写形式：
Foo.jsx
jsx
export default {
setup(props, { slots }) {
return {
slots,
};
},
render() {
return <h1>{this.slots.default && this.slots.default()}</h1>;
},
};Bar.vue
vue
// 注意 `script` 标签需要添加 `lang="jsx"` 的声明
<script lang="jsx">
export default {
render() {
return <h1>Hello world</h1>;
},
};
</script>之后，上述两个组件就可以在 App.vue 使用。
3、Jest 测试框架引入
3.1 下载依赖
bash
npm i jest jest-environment-jsdom babel-jest @vue/test-utils @vue/vue3-jest -D3.2 初始化 jest.config.js
bash
npx jest --init上述命令执行后，项目根目录生成了 jest.config.js 文件。然后，在该文件进行配置。
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 创建命令
json
// package.json
"scripts": {
"test": "jest"
}4、完整的 package.json
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"
}
}