将 TransformWithESBuild 与 Vite 一起使用

简介

Vite 是一款针对现代化浏览器的一个轻量级的前端构建工具，使用 Rollup 进行打包，并且集成了一些开发服务器的功能。它的热更新效果非常不错，适合用来进行前端开发。

TransformWithESBuild 是一个基于 ESBuild 的 Babel 插件，它可以将各种 TypeScript、JSX 等文件进行转换，同时保持较高的转换速度和较小的输出文件体积。

本文将会介绍如何在 Vite 中使用 TransformWithESBuild 进行前端开发。

安装

首先，我们需要安装 Vite 和 TransformWithESBuild，通过以下命令进行安装：

npm install -g vite
npm install –D transform-esbuild

配置

在你的项目中创建一个 vite.config.js 文件，并添加以下代码：

import esbuild from 'esbuild';
import transform from 'transform-esbuild';

export default {
  plugins: [
    transform({
      // 将插件的配置项填写在这里
      loader: 'jsx',
      tsconfigRaw: {},
    }),
  ],
  build: {
    target: 'es2015',
    rollupOptions: {
      plugins: [esbuild()],
    },
  },
};

同时，将你的项目中的 .babelrc 文件改成 .babelrc.js 文件，并在其中添加一下代码：

module.exports={
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        },
        "modules":false
      }
    ]
  ]
}

在 package.json 文件中添加以下代码：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

准备工作完成之后，你就可以使用 npm run dev 命令来启动开发服务器，并且在其中自由地使用 TransformWithESBuild 进行开发了。

注意事项

由于 TransformWithESBuild 插件中基于 ESBuild 所实现的编译工作是在构建期间进行的，所以当我们需要使用一些在运行时(Opaque:具体的应该如何翻译，此处表达运行后)才能解决的问题时，我们需要使用一些额外的配置来进行帮助。

例如，当我们需要使用 antd 库时，我们需要在 vite.config.js 文件中进行如下配置：

const transform = require('transform-esbuild');
const { createImportPlugin } = require('transform-esbuild-import-to-string');

export default {
  plugins: [
    transform({
      // 将插件的配置项填写在这里
      loader: 'jsx',
      tsconfigRaw: {},
      plugins: [
        createImportPlugin({
          libraryName: 'antd', // 需要引入的库的名字
          es6: true,
          style: 'css', // 需要引入的组件的样式
        }),
      ],
    }),
  ],
  build: {
    target: 'es2015',
    rollupOptions: {
      plugins: [esbuild()],
    },
  },
};

引入外部样式表时，我们还需要进行一些额外的配置，在 vite.config.js 文件中添加以下代码：

// 引入 path 模块
import path from 'path';
import esbuild from 'esbuild';
import transform from 'transform-esbuild';
import { createImportPlugin } from 'transform-esbuild-import-to-string';

export default {
  plugins: [
    transform({
      // 之前所讲到的 Transform 的配置
    }),
  ],
  build: {
    target: 'es2015',
    // 添加这个选项，可以将样式合并在一起
    cssCodeSplit: false,
    // 设置路径别名
    resolve: {
      alias: {
        // 设置资源路径
        '@': path.resolve(__dirname, 'src'),
        // 设置样式表路径
        '@styles': path.resolve(__dirname, 'src/styles'),
      },
    },
    rollupOptions: {
      plugins: [esbuild()],
    },
  },
};

在你的代码中添加别名后，你可以在项目中随意引用，在 *.vue 或者 *.ts(x) 文件中，你可以通过 import '@/xxx/xxx' 或者 import '@styles/xxxx.css' 来引入对应的资源。

结论

使用 TransformWithESBuild 进行项目开发可以让你的代码更加高效、简洁，同时还可以大量减少项目的构建时间。在配合 Vite 进行开发时，更是能够体现出其优势，非常适合用来进行前端开发。