Webpack (with SWC)

SWC 是一个用于 JavaScript 和 TypeScript 的快速、可靠的编译器集合。SWC 的全称是 "Super-fast Web Compiler"，它旨在提供高性能的 JavaScript 和 TypeScript 编译器，以及相关的工具和库。

SWC 是用 Rust 编写的，它利用 Rust 的性能和并发性优势来提供快速的编译速度。它支持最新的 ECMAScript 标准，并且具有与 Babel 相似的功能，可以进行代码转换、语法分析、语法转换和压缩等操作。

要使用 SWC，您可以按照以下步骤进行设置和配置：

1、 安装 SWC： 首先，您需要安装 SWC 编译器。您可以使用 Node.js 的包管理器（如 npm 或 Yarn）来安装 SWC。在命令行中执行以下命令：

# 使用 npm 安装
npm install @swc/core


# 使用 Yarn 安装
yarn add @swc/core

2、 创建 SWC 配置文件： 在项目根目录下创建一个名为 .swcrc 的文件，并在其中配置 SWC 的选项。您可以根据需要配置不同的转换规则、插件和其他选项。以下是一个示例 .swcrc 文件的内容：

{
 "jsc": {
   "parser": {
     "syntax": "ecmascript",
     "tsx": true
   },
   "transform": {
     "legacyDecorator": true
   }
 }
}

这个示例配置文件启用了对 ECMAScript 和 TypeScript 代码的解析，并启用了对装饰器语法的支持。

3、 使用 SWC 编译代码： 一旦安装和配置了 SWC，您可以使用 SWC 命令行工具或集成到构建工具中来编译代码。以下是一些常见的用法示例：

使用 SWC 命令行工具：

swc src/index.js --out-dir dist

这个命令将编译 src/index.js 文件，并将输出文件保存到 dist 目录中。

在构建工具（如 webpack）中使用 SWC 插件：

首先，您需要安装适用于您的构建工具的 SWC 插件。例如，对于 webpack，您可以安装 @swc-webpack-loader:

npm install @swc/core @swc/jest @swc-node/register @swc-webpack-loader

然后，在 webpack 的配置文件中添加相应的配置：

module.exports = {
   // ...
   module: {
     rules: [
       {
         test: /\.js$/,
         use: {
           loader: '@swc-webpack-loader',
           options: {
             swcrc: true
           }
         }
       }
     ]
   }
   // ...
 };

这个配置将使用 SWC 编译 JavaScript 文件。

以上是使用 SWC 的基本步骤和示例。您可以根据具体的项目需求和工具链进行更详细的配置和集成。请参考 SWC 的文档和相关资源以获取更多详细信息和示例。

SWC官网：https://swc.rs/docs/getting-started