Vite（四）后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js

Vite（四）后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js

• 网址：https://vitejs.cn/guide/why.html

1. 后端集成

如果你想使用传统的后端（如 Rails, Laravel）来服务 HTML，但使用 Vite 来服务其他资源，可以查看在 Awesome Vite 上的已有的后端集成列表。

或者你可以按照如下步骤手动配置：

1. 在你的 Vite 配置中配置入口文件和启用创建 manifest：

   // vite.config.js
   export default {
        
     build: {
        
       // 在 outDir 中生成 manifest.json
       manifest: true,
       rollupOptions: {
        
         // 覆盖默认的 .html 入口
         input: '/path/to/main.js'
       }
     }
   }
   

   别忘记在你的入口添加 dynamic import polyfill，因为它不会自动注入了：

   // 添加到你应用入口文件的开头
   import 'vite/dynamic-import-polyfill'
   

2. 在开发环境中，在服务器的 HTML 模板中注入以下内容（用正在运行的本地 URL 替换 http://localhost:3000）：

   <!-- 如果是在开发环境中 -->
   <script type="module" src="http://localhost:3000/@vite/client"></script>
   <script type="module" src="http://localhost:3000/main.js"></script>
   

   还要确保服务器配置为提供 Vite 工作目录中的静态资源，否则图片等资源将无法正确加载。

   如果你正使用 @vitejs/plugin-react-refresh 配合 React，你还需要在上述脚本前添加下面这个，因为插件不能修改你正在服务的 HTML：

   <script type="module">
     import RefreshRuntime from "http://localhost:3000/@react-refresh"
     RefreshRuntime.injectIntoGlobalHook(window)
     window.$RefreshReg$ = () => {
        }
     window.$RefreshSig$ = () => (type) => type
     window.__vite_plugin_react_preamble_installed__ = true
   </script>
   

3. 在生产环境中：在运行 vite build 之后，一个 manifest.json 文件将与静态资源文件一同生成。一个示例清单文件会像下面这样：

   {
        
     "main.js": {
        
       "file": "assets/main.4889e940.js",
       "src": "main.js",
       "isEntry": true,
       "dynamicImports": ["views/foo.js"],
       "css": ["assets/main.b82dbe22.css"],
       "assets": ["assets/asset.0ab0f9cd.png"]
     },
     "views/foo.js": {
        
       "file": "assets/foo.869aea0d.js",
       "src": "views/foo.js",
       "isDynamicEntry": true,
       "imports": ["_shared.83069a53.js"]
     },
     "_shared.83069a53.js": {
        
       "file": "assets/shared.83069a53.js"
     }
   }
   

   • 清单是一个 Record<name, chunk> 结构的对象。
   • 对于 入口 或动态入口 chunk，键是相对于项目根目录的资源路径。
   • 对于非入口 chunk，键是生成文件的名称并加上前缀 _。
   • Chunk 将信息包含在其静态和动态导入上（两者都是映射到清单中相应 chunk 的键)，以及任何与之相关的 CSS 和资源文件。

   你可以使用这个文件来渲染链接或者用散列文件名预加载指令（注意：这里的语法只是为了解释，实际使用时请你的服务器模板语言代替）：

   <!-- 如果是在生产环境中 -->
   <link rel="stylesheet" href="/assets/{
        { manifest['style.css'].file }}" />
   <script type="module" src="/assets/{
        { manifest['index.js].file }}"></script>
   

2. 比较

Snowpack

Snowpack 也是一个与 Vite 十分类似的非构建式原生 ESM 开发服务器。除了不同的实现细节外，这两个项目在技术上比传统工具有很多共同优势。Vite 的依赖预绑定也受到了 Snowpack v1（现在是 esinstall）的启发。这两个项目之间的一些主要区别是：

生产构建

Snowpack 的默认构建输出是未打包的：它将每个文件转换为单独的构建模块，然后将这些模块提供给执行实际绑定的不同“优化器”。这么做的好处是，你可以选择不同终端打包器，以适应不同需求（例如 webpack, Rollup，甚至是 ESbuild），缺点是体验有些支离破碎 —— 例如，esbuild 优化器仍然是不稳定的，Rollup 优化器也不是官方维护，而不同的优化器又有不同的输出和配置。

为了提供更流畅的体验，Vite 选择了与单个打包器（Rollup）进行更深入的集成。Vite 还支持一套 通用插件 API 扩展了 Rollup 的插件接口，开发和构建两种模式都适用。

Vite 支持广泛的功能，构建过程也集成度更高，以下功能目前在 Snowpack 构建优化器中不可用：

• 多页面应用支持
• 库模式
• 自动分割 CSS 代码