前言
vite可以根据指定的模板帮我们创建一个项目，并且快速启动，但是呢，它创建的那些文件，我却从来没有关注过。最近看到一篇帖子说是有一个工具叫farm，它比更快的vite还要更快，于是借着体验farm和vim的机会，来手搓一个 vue 项目，研究每一个文件都是干嘛的。
正文
参考 farm官网 vue官网
回忆以往的 vue 项目结构，我们需要创建以下文件：
package.json：
安装相关依赖，参考 vite#plugins
1
| pnpm add vue && pnpm add -D @vitejs/plugin-vue @farmfe/cli @farmfe/core
|
现在package.json文件是这样的：
1
2
3
4
5
6
7
8
9
10
| {
"dependencies": {
"vue": "^3.4.31"
},
"devDependencies": {
"@farmfe/cli": "^1.0.2",
"@farmfe/core": "^1.2.4",
"@vitejs/plugin-vue": "^5.0.5"
}
}
|
然后添加一个脚本块"scripts":{"dev":"farm start"}
再添加"type":"module"，这个不添加会报错，因为它的默认值是 commonjs。
现在我们创建farm.config.ts：这个是 farm 的配置文件，类似于vite.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| import { UserConfig } from "@farmfe/core"
import vue from "@vitejs/plugin-vue"
// 关于这个 defineConfig，我认为应该是为了区分 vite 吧，不然只需要按照 vite 那样导出 defineConfig 函数就好了
// 更新：在浏览官方文档时，注意到其实是有 defineConfig 函数导出的
function defineConfig(config: UserConfig){
return config;
}
export default defineConfig({
compilation: {
input: {
index: "./index.html"
},
output: {
path: "build",
publicPath: "/",
targetEnv: "browser"
}
},
// 这里要注意的是，因为 farm 还没有完全适配 vue，所以只能暂时使用 vite 的插件，而 vite 的插件要配置在这里
vitePlugins: [
vue()
]
})
|
然后是index.html，总入口文件，省的打那么多字，就直接最小化了：
1
2
3
4
5
6
7
| <!DOCTYPE html> <!-- 这里不声明为 html 会报错，不是很理解，按理来说没有这个浏览器也会识别 -->
<html>
<body>
<div id="app"></div> <!-- 定义一个 div，我们的 vue 容器就挂载在这里 -->
<script type="module" src="./main.ts"></script> <!-- 有一个好笑的是，用习惯了 vscode 的自动补全，这里的 script 标签没有收尾报错了，哈哈。。 -->
</body>
</html>
|
然后是main.ts，这个作用是把创建 vue 实例的过程抽取出来，也可以写在<script>里面
1
2
3
4
5
6
| import { createApp } from "vue"
import App from "./App.vue"
const app = createApp(App)
app.mount("#app")
|
然后是App.vue，这个是 vue 的组件，我们可以在这里面写 vue 的语法，为了简单就只写<template>，这个标签是必须的
1
2
3
| <template>
I'm the best!
<template>
|
现在我们有以下文件：
1
2
3
4
5
6
7
8
| .
├── App.vue
├── farm.config.ts
├── index.html
├── main.ts
├── node_modules
├── package.json
└── pnpm-lock.yaml
|
运行pnpm dev，一次成功（并不是
我们现在修改package.json添加以下脚本：
1
2
3
| {
"build": "farm build"
}
|
执行pnpm build发现报了一个错，其中一句话是这样写的：
The file that `core-js/modules/es.symbol.description.js` points to does not exist.
提取一下关键字就会发现，core-js 的啥啥啥不存在，搜索发现core-js可以快速实现polyfill
那么polyfill又是啥呢？继续搜索，它是可以将现代的 web 特性在老旧的浏览器中得以正常运行的工具
所以我们安装一下pnpm add -D core-js，再执行pnpm build，目录下多了个build文件夹：
1
2
3
4
5
6
7
8
| .
├── build
│ ├── index.html
│ ├── index_31d2.02b1796b.js
│ ├── index_4260.169e2276.js
│ ├── index_9beb.c395067c.js
│ ├── index_e1ee.dab66b54.js
│ └── index_e1ee.dab66b54.js.map
|
我们还可以添加这段脚本在本地创建一个服务器用来预览：
1
2
3
| {
"preview": "farm preview"
}
|
运行pnpm preview，发现成功运行了，通过浏览器的 devtools 观察，运行的是 build 文件夹的内容
之后的内容和 vite 项目开发大差不差了