开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

vite 插件介绍

Vite 将会使用 esbuild 预构建依赖。 esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。 vite在开发环境使用esbuild来打包，基于浏览器支持esm的方式。 在生产环境是使用rollup来打包。

1. vite 插件时基于 rollup 插件接口的一种扩展，vite 插件拥有和 rollup 一样的钩子函数，特有的一些属性和方法来实现,如 config。

• 通用的钩子：buildStart,resolveId,load,transform,buildEnd,closeBundle
• 特有的钩子：config， configResolved，configureServer 等

2. 我们自己调试或者写一些自己的插件的时候，建议在你的项目中引入 vite-plugin-inspect。可以检查你项目的模块和栈信息
3. vite 插件的规范，建议参考统一规范来写。如针对某个框架的插件，或者虚拟插件

2. vite 插件plugin-vue-jsx.js

import { transformSync } from "@babel/core";
import jsx from "@vue/babel-plugin-jsx"; //To add Vue JSX support
import importMeta from "@babel/plugin-syntax-import-meta"; //Allow parsing of import.meta
import { createFilter } from "@rollup/pluginutils";
// This plugin adds support for the types syntax used by the TypeScript programming language.
import typescript from "@babel/plugin-transform-typescript";
function vueJsxPlugin(options = {}) {
  let root;
  return {
    name: "vite:vue-jsx",
    config() {
      return {
        esbuild: {
          //默认情况下在开发的时候会编译我们的代码，它会也会编译jsx,但是它会编译 成React.createElement
          include: /\.ts$/,
        },
        define: {
          __VUE_OPTIONS_API__: true,
          __VUE_PROD_DEVTOOLS__: false,
        },
      };
    },
    configResolved(config) {
      root = config.root;
    },
    transform(code, id) {
      const {
        include,
        exclude,
        babelPlugins = [],
        ...babelPluginOptions
      } = options;
      //   Vite 暴露了 @rollup/pluginutils 的 createFilter 函数，
      //   以支持 Vite 独有插件和集成使用标准的 include/exclude 过滤模式，Vite 核心自身也正在使用它。
      const filter = createFilter(include || /\.[jt]sx$/, exclude);
      const [filepath] = id.split("?");
      if (filter(id) || filter(filepath)) {
        const plugins = [
          importMeta,
          [jsx, babelPluginOptions],
          ...babelPlugins,
        ];
        if (id.endsWith(".tsx") || filepath.endsWith(".tsx")) {
          plugins.push([typescript, { isTSX: true, allowExtensions: true }]);
        }
        // transformSync 转换传入的代码。返回包含生成的代码、源映射和AST的对象。
        const result = transformSync(code, {
          babelrc: false,
          configFile: false,
          ast: true,
          plugins,
        });
        return {
          code: result.code,
          map: result.map,
        };
      }
    },
  };
}
export default vueJsxPlugin;

3. 简单介绍下 esbuild 插件，

一个 esbuild 插件是一个包含 name 和 setup 函数的对象。 它们以数组的形式传递给构建 API 调用,setup 函数在每次 BUILD API 调用时都会运行一次。

let envPlugin = {
  name: "env",
  setup(build) {
    //拦截名为env的导入路径，以便esbuild不会尝试将它们映射到文件系统位置
    //用env-ns名称空间标记它们，以便为该插件保留它们
    console.log(build);
    build.onResolve({ filter: /^env$/ }, (args) => ({
      path: args.path,
      namespace: "env-ns",
    }));
    //加载带有env-ns名称空间标记的路径，它们的行为就像指向包含环境变量的JSON文件一样
    build.onLoad({ filter: /.*/, namespace: "env-ns" }, () => ({
      contents: JSON.stringify(process.env),
      loader: "json",
    }));
  },
};
require("esbuild")
  .build({
    entryPoints: ["app.js"],
    bundle: true,
    outfile: "out.js",
    plugins: [envPlugin],
  })
  .catch(() => process.exit(1));

小结

vite相比较webpack，rollup打包工具，在开发环境更快。但是在生产环境需要使用rollup来打包，相信后续会优化不同环境打包的策略。