简单使用比babel快的swc

babel VS swc

swc是一个类似babel的JavaScript/TypeScript编译器，但是由于swc使用Rust实现，所以具备比babel出色的性能。

webpack与bable的性能瓶颈都在于JS语言，出现了go实现的esbuild与Rus实现的swc等工具，esbuild想要开辟一个构建工具性能的新时代,创建一个易用的现代打包器，swc的目标则是是替代babel，在官方文档的Comparison with babel这个单元，我们可以看到swc团队将相当一部分bable的插件重写了以增强swc的能力。

同时swc也提供了一个构建打包工具spack，这个工具并不是一个全面的构建工具，但是我们可以通过这个工具简单的体验一下swc的能力。

使用swc

我们在简单的工具库编写时，可以使用swc提供的spack命令来快速打包出commonjs, es6, amd, umd。

1. 安装swc的依赖

npm i -D @swc/core @swc/cli

or

yarn add --dev @swc/core @swc/cli

2. 配置spack

我们可以在package.json中配置脚本直接使用@swc/cli提供的spack编译，那么我们只需要在项目的根目录增加配置文件spack.config.js，并将配置写入。具体配置项可参考文档

const { config } = require("@swc/core/spack");

module.exports = config({
  //入口文件
  entry: __dirname + "/src/index.ts",
  //输出
  output: {
    path: __dirname + "/dist",
  },
  // swc编译配置
  options:{
    jsc: {
        //解析配置
        parser: {
          syntax: "typescript", //输入文件格式
          tsx: false,    // 是否支持tsx
          dynamicImport: false, //是否支持动态导入
          decorators: false, //是否支持装饰器
        },
        transform: null,
        target: "es5", //转译目标
        loose: false, 
        externalHelpers: false,
        keepClassNames: false
      },
      // 输出文件配置
      module: {
          type: "commonjs",  
          strict: false,
          strictMode: true,
          lazy: false,
          noInterop: false,
          ignoreDynamic: false
        }
  }
});

3. 配置script

在packge.json中增加

 "scripts": {
    "build": "spack"
  }

之后就可以使用npm run build 进行编译了

总结

swc与esbuild这类前端构建工具的出现，提醒了我们，JS语言本身的性能限制了前端工具链的效能。通过引入其他高性能的语言，我们可以做的更好，比如在项目中使用其他语言编写编译工具增强DSL的编译性能。