手写Vite 构建工具: 对 Vue.js 开发者来说必不可少的构建工具

2023-12-05 00:25:39

Vite 构建工具的原理

Vite 构建工具的工作原理可以概括为以下几个步骤：

重写模块引入路径：
Vite 会重写所有以 /@modules/ 开头的模块引入路径，并将其转换为相对于 node_modules 目录的路径。这样，浏览器就可以直接从 node_modules 中加载模块，而无需经过 Vite 的打包过程。
拦截带有 /@modules/ 的请求：
当浏览器向服务器发送带有 /@modules/ 的请求时，Vite 会拦截该请求，并从 node_modules 中加载对应的模块。然后，Vite 将模块内容返回给浏览器。
解析 .vue 文件：
Vite 会解析 .vue 文件，并将模板、脚本和样式部分提取出来。然后，Vite 会将这些部分分别编译成 JavaScript、CSS 和 HTML 代码。
静态服务插件：
Vite 具有一个静态服务插件，可以将项目中的静态文件返回给浏览器。这使得 Vite 可以作为开发服务器使用，而无需额外的配置。

手写 Vite 构建工具

现在，让我们一步一步地手动构建一个简单的 Vite 构建工具。

初始化项目：
首先，创建一个新的 Node.js 项目，并安装必要的依赖项。
创建 Vite 配置文件：
在项目中创建一个名为 vite.config.js 的文件，并添加以下内容：

module.exports = {
  plugins: [
    // 重写模块引入路径的插件
    {
      name: 'module-rewrite',
      apply: 'serve',
      transform(source, id) {
        if (id.startsWith('/@modules/')) {
          return {
            code: `export * from '${id.replace('/@modules/', '/node_modules/')}'`,
            map: null
          }
        }
      }
    },
    // 拦截带有 `/@modules/` 的请求的插件
    {
      name: 'module-intercept',
      apply: 'serve',
      handle(req, res) {
        if (req.url.startsWith('/@modules/')) {
          const modulePath = req.url.replace('/@modules/', '/node_modules/')
          const moduleContent = fs.readFileSync(modulePath)
          res.end(moduleContent)
        }
      }
    },
    // 解析 `.vue` 文件的插件
    {
      name: 'vue',
      apply: 'build',
      transform(source, id) {
        if (id.endsWith('.vue')) {
          const { render, script } = compileVue(source)
          return {
            code: `
              const render = ${render}
              const script = ${script}
              export { render, script }
            `,
            map: null
          }
        }
      }
    },
    // 静态服务插件
    {
      name: 'static-serve',
      apply: 'serve',
      handle(req, res) {
        const filePath = path.join(process.cwd(), req.url)
        if (fs.existsSync(filePath)) {
          res.sendFile(filePath)
        }
      }
    }
  ]
}