SWC 是一个类似于 Babel 的代码转义器，它的主要功能就是把 ES2015 或更高版本的 JS 代码转换为老浏览器能够使用的 ES5 或更低版本的 JS 代码。SWC 是使用 Rust 语言编写的，相比 Babel 来说，速度要更快。按照官网的说法 SWC 的速度要比 Babel 快 20 倍。

SWC 官网 https://swc-project.github.io/ ，这官网用的还是 Github Pages 。

安装

SWC 可以在 CLI 命令行中使用，也可以和 Webpack 一起使用，这里先写 CLI 命令行。

初始化项目：

npm init -y

在不科学上网的情况下，即便切换到淘宝的 npm 源，也很难成功安装 SWC，需要通过 cnpm 安装。

安装 cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 @swc/core 和 @swc/cli ：

cnpm install --save-dev @swc/core @swc/cli

安装 browserslist：

cnpm install --save-dev browserslist

配置

在项目的根目录创建一个 .swcrc 文件，配置信息如下：

[
  {
    "env": {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }
  }
]

上面是配置最低支持的浏览器。

或者也可以这样配置：

[
  {
    "env": {
      "targets": "> 0.25%, not dead"
    }
  }
]

上面配置支持占比大于 0.25% 的浏览器。

CLI 转换

转换后直接在终端输出代码：

npx swc src/main.js

上面的命令是转换 src/main.js，转换完成后代码会直接在终端输出。

转换后输出到指定目录：

npx swc src/main.js -o dist/index.js

上面转换 src/main.js ，转换完成后输出到 dist 目录。

转换指定目录中的所有 JS 文件：

npx swc src -d dist

上面转换 src 目录中的所有 JS 文件，转换后的文件会输出到 dist 目录。

如果需要转换模块，需要在 .swcrc 目录中添加模块配置，如下：

[
  {
    "test": ".*.js$",
    "module": {
      "type": "amd"
    }
  },
  {
    "env": {
      "targets": "> 0.25%, not dead"
    }
  }
]

上面配置把 js 文件转换为 AMD 模块。

下面是一个 ES6 模块：

export default () => {
  const h1El = document.createElement('h1');
  h1El.innerHTML = 'Hello SWC';
  return h1El;
};

转换后如下：

define(['exports'], function (_exports) {
  'use strict';
  Object.defineProperty(_exports, '__esModule', {
    value: true,
  });
  _exports.default = void 0;
  var _default = function () {
    var h1El = document.createElement('h1');
    h1El.innerHTML = 'Hello SWC';
    return h1El;
  };
  _exports.default = _default;
});

注意！SWC 只能转换 ES6 的语法部分，对于 Promise 之类的功能是无法转换的。

如果要转换 Promise 之类的功能，在不使用打包工具的情况下可以通过 script 引入 polyfill，polyfill CDN 地址 https://www.bootcdn.cn/babel-polyfill/ ，可以选择一个版本引入。

和 Webpack 一起使用

SWC 也提供了 Webpack Loder，可以和 Webpack 一起使用。

关于 Webpack 的安装和使用这里就不写了，如果不了解 Webpack 的话，可以看一下 Webpack 简易使用指南 。

安装 @swc/core 和 swc-loader ：

cnpm install --save-dev @swc/core swc-loader

安装完成后在 Webpack 的配置文件中添加 SWC 的 Loder 配置。

下面是 Webpack 配置文件：

const path = require('path');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  打包完成后输出的目录
    path: path.resolve(__dirname, 'dist'),
    //  打包完成后的 JS 文件名
    filename: 'index.js',
  },
  module: {
    rules: [
      //  SWC 的 Loder 配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'swc-loader',
        },
      },
    ],
  },
};

SWC 的配置还是和上面一样的使用 .swcrc 的配置。

运行打包后 swc-loder 就会调用 swc-core 转码。

SWC 和 Webpack 一起使用也还是不能转换 ES6 中新增的 Promise 之类的功能，所以还需要使用 polyfill 或 core-js。

因为 core-js 可以按需引入，而 polyfill 需要配合 Babel 才能实现按需引入，所以这里就使用 core-js。

安装 core-js：

cnpm install --save-dev core-js

安装完成后在 main.js 中引入需要的库，比如我用到了 Promise ，我就需要引入 core-js 的 Promise 转换库，如下：

import 'core-js/features/promise';

core-js 的转换模块就在 core-js/features 目录中。

打包完成后就可以在 IE 浏览器中使用 Promise 之类的功能了。

使用感受

SWC 的转换速度确实比较快，但是在插件和智能化方面还暂时不能和 Babel 相比。Babel 配合 @babel/polyfill 可以实现自动检测代码，然后根据用到的 ES6 功能自动引入相应的模块。也就是说 Babel 可以不需要手动引入 Promise 之类的模块，如果它检测到你使用 Promise ，打包的时候就会自动引入 Promise。

就目前来说，项目如果需要转换 ES6 代码，还是建议首选 Babel。Babel 发布的时间较早，在成熟度方面要更高一些。SWC 根据更新日志看应该是 2019 年 2 月发布的，虽然目前也已经比较完善了，但是和 Babel 相比还是差一些。不过随着 SWC 的更新，在加上速度优势，相信未来 SWC 为成为转换 ES6 的首选工具。

相关文章：