SWC是什么

  • SWC 是一个基于 Rust 的可扩展的平台，适用于下一代快速开发工具， 可用于编译和打包
  • 它被 Next.js、Parcel 和 Deno 等工具以及 Vercel、ByteDance、腾讯、Shopify 等公司使用
  • SWC 可以下载并用作预构建的二进制文件，也可以从源代码构建

  • SWC在单线程上比 Babel 快 20倍，在四核上快 70 倍。

    上手

    简介：

    swc 与 babel 一样，将命令行工具、编译核心模块分化为两个包。

  • @swc/cli == @babel/cli

  • @swc/core == @babel/core

    安装：

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

    swc/cli常用命令

    ```bash // 转换文件，只打印在控制台 npx swc ./file.js

// 根据源文件生成编译过后的文件 npx swc ./src/index.js -o dist.js

// 根据源文件目录生成编译过后的文件目录 npx swc ./src -d dist

// 根据项目中的.swcrc配置进行编译 npx swc input.js —config-file .swcrc

// 要在文件变改时自动重新编译文件,需要安装chokidar npm i -D chokidar npx swc ./src/index.js -w

  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/2828912/1647505511894-1a64c9ee-9be7-4105-b688-946794b98f89.png#clientId=u060dcbce-1fae-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=154&id=uaee1d3bc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=164&originWidth=376&originalType=binary&ratio=1&rotation=0&showTitle=true&size=8586&status=done&style=none&taskId=u99c36cca-eb74-456d-93e2-226f616dbd8&title=src%2Findex.js%E4%BB%A3%E7%A0%81&width=353 "src/index.js代码")![image.png](https://cdn.nlark.com/yuque/0/2022/png/2828912/1647505534341-05a7bd45-2067-4183-bf56-43c0e8e51f5e.png#clientId=u060dcbce-1fae-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=154&id=ufbf67f7f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=229&originWidth=451&originalType=binary&ratio=1&rotation=0&showTitle=true&size=11581&status=done&style=none&taskId=ua0a7f50c-607e-44bc-9aea-21f0e9b58a7&title=%E9%80%9A%E8%BF%87swc%E7%BC%96%E8%AF%91%E8%BF%87%E5%90%8E%E7%9A%84%E4%BB%A3%E7%A0%81&width=303 "通过swc编译过后的代码")<br />从上述基操过后的图片可看出，通过swc编译过后，会把es6语法转换成浏览器可识别的代码，并生成对应的source-map来用于源代码映射。
  2. <a name="jn56L"></a>
  3. ## .swcrc配置文件
  4. 除了上述中通过命令行工具进行编译外，swc同时支持类似于babel的.babelrc配置文件-->.swcrc配置文件<br />以下为swc官网提供的开箱即用的配置，无需定制，或者可以覆盖配置。
  5. ```json
  6. {
  7.   // 编译规则
  8.   "jsc": {
  9.     "parser": {
  10.        // 除了 ecmascript，还支持 typescript
  11.       "syntax": "ecmascript",
  12.        // 是否解析jsx，
  13.       "jsx": false,
  14.        // 是否支持动态导入，
  15.       "dynamicImport": false,
  16.       "privateMethod": false,
  17.       "functionBind": false,
  18.       "exportDefaultFrom": false,
  19.       "exportNamespaceFrom": false,
  20.       // 是否支持装饰器，
  21.       "decorators": false,
  22.       "decoratorsBeforeExport": false,
  23.       // 是否支持top-level-await
  24.       "topLevelAwait": false,
  25.       "importMeta": false
  26.     },
  27.     "transform": null,
  28.     // 编译输出规范
  29.     "target": "es5",
  30.     // 类似于babel-preset-env 松散模式的工作来启用松散的编译转换
  31.     "loose": false,
  32.     // 输出代码可能依赖于辅助函数来支持目标环境。默认情况下，辅助函数会内联到需要的输出文件中。
  33.     "externalHelpers": false,.
  34.     "keepClassNames": false
  35.   }
  36. }

支持更多浏览器

  • 安装browserslist，browserslist：自动配置支持的浏览器

    1. npm install browserslist -D

  • 更新.swcrc配置文件

    1. {
    2. "env": {
    3.   // 需要支持的浏览器版本，向后兼容
    4.   "targets": {
    5.     "chrome": "79"
    6.   },
    7.   // 模式可能值为：usage, entry, undefined，与usebuiltins相匹配
    8.   // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
    9.   "mode": "entry",
    10.   // corejs 的版本
    11.   "coreJs": 3
    12. }
    13. }

    模块

  • SWC 可以使用 ES 模块将您的代码转换为 CommonJS 或 UMD/AMD。默认情况下，模块语句将保持不变。

  • 更新.swcrc配置文件

    1. {
    2. "module": {
    3.   // 转换类型可能值:"commonjs", "es6", "amd", "umd"
    4.   "type": "commonjs",
    5.   // 严格 要防止__esModule属性被导出，您可以将 strict 选项设置为true。
    6.   "strict": false,
    7.   // 使用严格模式
    8.   "strictMode": true,
    9.   // 懒惰
    10.   "lazy": false,
    11.   // 无互操作
    12.   "noInterop": false
    13. }
    14. }

    压缩

  • v1.2.67启用来配置 SWC 以缩小代码：minify.swcrc

  • 更新.swcrc配置文件

    1. {
    2. // 是否开启压缩
    3. "minify": true,
    4. // 压缩选项
    5. "jsc": {
    6.   "minify": {
    7.     "compress": {
    8.       "unused": true
    9.     },
    10.     "mangle": true
    11.   }
    12. }
    13. }

    打包

  • 创建一个spack.config.js ```javascript const { config } = require(“@swc/core/spack”);

module.exports = config({ entry: { web: dirname + “/src/index.ts”, }, output: { path: dirname + “/lib”, }, });

  2. - 执行 npx spack
  3. - ![image.png](https://cdn.nlark.com/yuque/0/2022/png/2828912/1647508218497-249c1351-63c1-479e-afd1-be235e541a6a.png#clientId=u060dcbce-1fae-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=96&id=NaDm9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=106&originWidth=402&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7078&status=done&style=none&taskId=uaf744eb7-7653-4a04-82c4-a7455b00ff7&title=&width=363)![image.png](https://cdn.nlark.com/yuque/0/2022/png/2828912/1647508014318-284f6211-dcd6-4f58-a29b-647833c4f07e.png#clientId=u060dcbce-1fae-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=85&id=fvu2W&margin=%5Bobject%20Object%5D&name=image.png&originHeight=67&originWidth=272&originalType=binary&ratio=1&rotation=0&showTitle=false&size=3424&status=done&style=none&taskId=u6e7070bc-296e-41e0-94a8-5eca8db08a6&title=&width=346)
  4. <a name="WVBp9"></a>
  5. ## @swc/core
  6.  @swc/core 模块可在 node.js中调用 api 直接进行代码的编译
  7. ```javascript
  8. const { transform } = require("@swc/core");
  9. const fs = require("fs");
  11. const code = fs.readFileSync("./src/index.js", "utf-8");
  13. transform(code, {
  14.   filename: "dist.js",
  15.   sourceMaps: true,
  16.   jsc: {
  17.     parser: {
  18.       syntax: "ecmascript",
  19.     },
  20.     transform: {},
  21.   },
  22. }).then((output) => {
  23.   console.log(output);
  24. });

通过node 执行上面的代码进行编译，得到如下结果 ：
image.png

reference: