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/coreswc-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 的首选工具。

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/871/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年05月07日 ©著作权归作者所有

发表评论

正在加载 Emoji