浅谈ESbuild+SWC编译TS

什么是ESbuild

上一篇文章中我们提到了Tsup是由esbuild驱动的打包工具，它的特点是不用我们配置esbuild繁琐的内容

Tsup编译ts文件-一个由esbuild驱动的新型打包库Tsup 是基于 esbuild 开发的一个新型打包工具（比 rollup 还新）。内置了 TypeScript 支持，零配置、开箱即用，帮助你高效创建现代 TypeScript/JavaScript 库

这篇文章我们来聊聊什么是esbuild 系统学习过前端框架的小伙伴可能知道 webpack 对的，就是那个编译要好几分钟的webpack，这里手动圈一下@webpack,在前期，在vue2时期，vite使用的是webpack来打包的，项目比较小的可能编译几十秒就能完成，但是如果是大型项目，动则五六分钟，甚至十几分钟，屎都拉完了他还在编译，后期vite更换了新一代的构建工具，rollup，但是对于大型项目来说还是特别慢 ESBuild是基于Go语言开发的JavaScript Bundler，后面也被vite广泛使用

什么是SWC

提到SWC小伙伴可能会很陌生，但是提到一个库小伙伴们就不会很陌生了@babel/core没错，这是用来转移es5代码的，总所周知，在大部分项目中还是需要转译成es5代码的，而SWC也是用于转译代码的 我们为什么要用SWC 没错@babel/core和webpack一样慢，很慢，所以我们需要使用新一代构建工具SWC，SWC是基于Rust的JavaScript Compiler(其生态中也包含打包工具spack)，rust和go的速度大家都是知道的，是非常快的

如何正确食用TS

基本包安装

npm install @swc/core #swc核心包
npm install esbuild #esbuild
npm install ts-node # 执行ts命令需要

构建项目

tsc --init #构建tsconfig文件
npm init -y #构建npm配置文件

修改配置 我们需要在tscofing.json文件中修改如下几条需要修改这三个

"target": "ESNext"
"module": "ESNext"
"moduleResolution": "Node" 懂ts的小伙伴想必已经知道这是干什么的，这里我给ts基础不是那么好的小伙伴解释一下
target：指定ts文件被编译为的es版本这里我们用esnext
module：指定使用的模块化规范这里我们用esnext
moduleResolution 模块导入解析策略，这里有两个选择 classic 和 node classic是typescript默认的解析方式，但是这里我们使用node就行了我们需要在package.json文件中修改如下代码

"scripts": {
    "build": "node config.js"
  },
"type": "module"

配置esbuild

在根目录创建config.js文件，在文件里写入如下的esbuild配置代码

import esbuild from 'esbuild';
import swc from '@swc/core'
import fs from 'node:fs'
await esbuild.build({
    entryPoints: ['./src/main.ts'],
    bundle: true,
    loader: {
        '.js': 'js',
        '.ts': 'ts',
        '.jsx': 'jsx',
        '.tsx': 'tsx'
    },
    treeShaking: true,
    define: { "process.env.NODE_ENV": '"production"', },
    plugins: [
        {
            name: 'swc-loader',
            setup(build) {
                build.onLoad({ filter: /\.(js|ts|tsx|jsx)$/ }, (args) => {
                    const content = fs.readFileSync(args.path, 'utf-8')
                    const {code} = swc.transformSync(content, {
                        filename: args.path
                    })
                    return {
                        contents: code
                    }
                })
            }
        }
    ],
    outdir: 'dist'
})

我们来解释一下都配置了什么东西

entryPoints：人口文件
bundle：模块是否单独打包
loader：编译的文件类型
plugins：这个是esbuild的特性，可以添加插件进去，使用我们利用这个特性修改了自定义loader也就是swc
outdir：导出文件夹名称

写点东西玩玩

配置好这些以后就可以尽情玩耍了，写点东西玩玩吧

export const a: number = 1;
export const b: string = "ikun";
function test(value: any) {
    console.log(value);
}

export default{
    test
}
let x = 1;
let fn = () => 123;
console.log(x, fn);

然后我们执行如下命令打包成js

npm run build

还是很快的，虽然代码量不多，但是相比webpack没那么复杂的配置，也没那么慢，虽然esbuild确实要配置一些文件，如果你对esbuild的配置看不懂的话，我们下次讲esbuild和rollup相关的知识这是打包后的文件

"use strict";
(() => {
  // src/main.ts
  var a = 1;
  var b = "ikun";
  function test(value) {
    console.log(value);
  }
  var main_default = {
    test
  };
  var x = 1;
  var fn = function() {
    return 123;
  };
  console.log(x, fn);
})();

esbuild的高级玩法就自己去探索一下了，它拥有如下玩法