<p>两周前（202.02.17），<a href="https://dev.to/yyx990803/announcing-vite-2-0-2f0a">vite2.0 发布了</a>，作为使用了浏览器原生 ESM 为下一代前端工具，vite 2.0 相较于 1.0 更加成熟。在此之前笔者就开始<a href="https://juejin.cn/post/6844904194059550734">关注这类「新型」的前端工具</a>。这次趁着 vite 2.0 发布，也成功将一个基于 vue-cli(-service) + vue2 的已有项目进行了迁移。</p>
<p>迁移工作比较顺利，花了不到半天时间。但整个迁移过程中也遇到了一些小问题，这里汇总一下，也方便遇到类似问题的朋友一起交流和参考。</p>
<h2>项目背景</h2>
<p>在介绍具体迁移工作前，先简单介绍下项目情况。目前该项目上线不到一年，不太有构建相关的历史遗留债务。项目包含 1897 个模块文件（包括 node_modules 中模块），使用了 vue2 + vuex + typescript 的技术栈，构建工具使用的是 vue-cli（webpack）。算是一套比较标准的 vue 技术栈。由于是内部系统，项目对兼容性的要求较低，用户基本都使用较新的 Chrome 浏览器（少部分使用 Safari）。</p>
<h2>迁移工作</h2>
<p>下面具体来说下迁移中都做了哪些处理。</p>
<h3>1、配置文件</h3>
<p>首先需要安装 vite 并创建 vite 的配置文件。</p>
<pre class="blockcode"><code>npm i -D vite
复制代码</code></pre>
<p>vue-cli-service 中使用 <code>vue.config.js</code> 作为配置文件；而 vite 则默认会需要创建一个 <code>vite.config.ts</code> 来作为配置文件。基础的配置文件很简单：</p>
<pre class="blockcode"><code>import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
// ...
],
})
复制代码</code></pre>
<p>创建该配置文件，之前的 vue.config.js 就不再使用了。</p>
<h3>2、入口与 HTML 文件</h3>
<p>在 vite 中也需要指定入口文件。但和 webpack 不同，在 vite 中不是指定 js/ts 作为入口，而是指定实际的 HTML 文件作为入口。</p>
<p>在 webpack 中，用户通过将 entry 设置为入口 js（例如 <code>src/app.js</code>）来指定 js 打包的入口文件，辅以 HtmlWebpackPlugin 将生成的 js 文件路径注入到 HTML 中。而 vite 直接使用 HTML 文件，它会解析 HTML 中的 script 标签来找到入口的 js 文件。</p>
<p>因此，我们在入口 HTML 中加入对 js/ts 文件的 script 标签引用：</p>
<pre class="blockcode"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
</noscript>
<div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
</body>
</html>
复制代码</code></pre>
<p>注意上面 <code><script type="module" src="/src/main.ts"></script></code> 这一行，它使用浏览器原生的 ESM 来加载该脚本，<code>/src/main.ts</code> 就是入口 js 的源码位置。在 vite dev 模式启动时，它其实启动了一个类似静态服务器的 server，将 serve 源码目录，因此不需要像 webpack 那样的复杂模块打包过程。模块的依赖加载将完全依托于浏览器中对 <code>import</code> 语法的处理，因此可以看到很长一串的脚本加载瀑布流：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-1c21cbf40519d9f894ca204699a5508a.png"></p>
<p>这里还需要注意 <a href="https://vitejs.dev/config/#root">project root 的设置</a>。在默认是 <code>process.cwd()</code>，而 index.html 也会在 project root 下进行寻找。为了方便我将 <code>./public/index.html</code> 移到了 <code>./index.html</code>。</p>
<h3>3、使用 vue 插件</h3>
<p>vite 2.0 提供了对 vue 项目的良好支持，但其本身并不和 vue 进行较强耦合，因此通过插件的形式来支持对 vue 技术栈的项目进行构建。vite 2.0 官网目前（2021.2.28）推荐的 vue 插件会和 <a href="https://vitejs.dev/plugins/#vitejs-plugin-vue">vue3 的 SFC</a> 一起使用更好。因此这里使用了一个专门用来支持 vue2 的插件 <a href="https://www.npmjs.com/package/vite-plugin-vue2">vite-plugin-vue2</a>，支持 JSX，同时目前最新版本也是<a href="https://github.com/underfin/vite-plugin-vue2/pull/13">支持 vite2 的</a>。</p>
<p>使用上也很简单：</p>
<pre class="blockcode"><code>import { defineConfig } from 'vite';
+ import { createVuePlugin } from 'vite-plugin-vue2';
export default defineConfig( |
|
转播
