A new generation of compilation tools SWC

Recently, there has been a rust trend in the front-end circle. Any front-end tool that can be rewritten in rust is rewritten in rust. The tool introduced today is babel: swc implemented through rust, a tool for converting ES6 to ES5.

Moreover, on the official website of swc, it is very straightforward to say that the swc and babel commands can be replaced with each other, and most of the babel plugins have also been implemented.

One advantage of using rust is that it is fast. For example, in one of our previous projects, after replacing babel with swc, the compilation speed increased from the original 7 seconds to 1 second, and the efficiency exploded directly.

get started

Like babel, swc divides command-line tools and compiling core modules into two packages.

  • @swc/cli similar to @babel/cli ;
  • @swc/core similar to @babel/core ;
npm i -D @swc/cli @swc/core

With the following command, you can convert an ES6 JS file to ES5.

npx swc source.js -o dist.js

Here is the code source.js

const start = () => {
  console.log('app started')
}

The code includes two ES6 features, const declarations and arrow functions. After swc transformation, these two features are transformed into var declaration and function anonymous function respectively.

configuration file

Like babel, swc supports configuration files .babelrc .swcrc , and the configuration format is JSON.

{
  "jsc": { // 编译规则
    "target": "es5", // 输出js的规范
    "parser": {
      // 除了 ecmascript,还支持 typescript
      "syntax": "ecmascript",
      // 是否解析jsx,对应插件 @babel/plugin-transform-react-jsx
      "jsx": false,
      // 是否支持装饰器,对应插件 @babel/plugin-syntax-decorators
      "decorators": false,
      // 是否支持动态导入,对应插件 @babel/plugin-syntax-dynamic-import
      "dynamicImport": false,
      // ……
      // babel 的大部分插件都能在这里找到对应配置
    },
    "minify": {}, // 压缩相关配置,需要先开启压缩
  },
  "env": { // 编译结果相关配置
    "targets": { // 编译结果需要适配的浏览器
      "ie": "11" // 只兼容到 ie 11
    },
    "corejs": "3" // corejs 的版本
  },
  "minify": true // 是否开启压缩
}

Babel's plug-in system is integrated into jsc.parser by swc, basically most plug-ins can take care of it. Moreover, swc also inherits the ability of compression, which is enabled through the minify attribute, and jsc.minify used to configure compression-related rules. For more detailed configuration, see document .

Node APIs

@swc/core module in the node.js code, you can call the api in node.js to compile the code directly, which is a normal operation for the development of CLI tools.

// swc.mjs
import { readFileSync } from 'fs'
import { transform } from '@swc/core'

const run = async () => {
  const code = readFileSync('./source.js', 'utf-8')
    const result = await transform(code, {
    filename: "source.js",
  })
  // 输出编译后代码
  console.log(result.code)
}

run()

packaging code

In addition to escaping code, swc also provides an easy packaging capability. We create a new src folder, create two files in it: index.js , utils.js .

// src/index.js
import { log } from './utils.js'
const start = () => log('app started')
start()
// src/utils.js
export const log = function () {
  console.log(...arguments)
}
export const errorLog = function () {
  console.error(...arguments)
}

You can see that index.js imports utils.js , and then we create a new spack.config.js file, which is the configuration file packaged by swc.

// spack.config.js
module.exports = {
  entry: {
    // 打包的入口
    web: __dirname + "/src/index.js",
  },
  output: {
    // 打包后输出的文件夹
    path: __dirname + "/dist",
  },
};

Then run at the command line:

$ npx spack

After the package is successful, a web.js file dist

It can be seen not only index.js , utils.js packaged into one file, also conducted tree shaking , the utils.js not used errorLog method deleted.

Can it be used?

After all, after so many years of development, babel is far superior to swc whether it is a bug or a community activity. Therefore, if it is a small product to test the water, you can still try swc. If the old project has already used babel, it is not recommended to migrate.

In the process of using, still found some small problems. For example, if I use async function , swc will automatically import the regenerator-runtime module.

// 编译前,有个 async 方法
const start = async () => {
  console.log('app started')
}

After calling swc to compile, the code is as follows:

This result seems to be no problem, but swc is similar to babel, it also has helpers (@swc/helpers), and provides externalHelpers switch, if externalHelpers set to true , swc will import some tool classes in the form of modules.

// .swcrc
{
  "jsc": {
    "externalHelpers": true
  }
}

The externalHelpers default value is false , that this time, regenerator-runtime , in the end is in the form of import module, or the entire code is written to the file?

swc happens to have a [issue [ https://github.com/swc-project/swc/issues/1461 ]]( https://github.com/swc-project/swc/issues/1461) in discuss this issue.

In addition to the problem mentioned above, there is actually another point, that is, the author feels that there is a problem with the previous structure, and is stepping up the rewrite of version 2.0. I feel that I can look forward to it. In addition, the author of swc is a Korean brother in 1997. At present, I haven't graduated from university yet, and in the end I can only say one thing: awesome!


自然醒的笔记本
学习过程中的一些总结和沉淀,欢迎关注公众号「自然醒的笔记本」
3.9k 声望
6.8k 粉丝
0 条评论
推荐阅读
详解 Webpack devtools
最近在开发一个低代码平台,主要用于运营搭建 H5 活动。这中间涉及到第三方组件的开发,而第三方组件想要接入平台,需要经过我们特定的打包工具来 build。构建之后的组件,会合并成单个的 js 文件,而且代码会被...

Shenfq阅读 863

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.1k评论 3

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
3.9k 声望
6.8k 粉丝
宣传栏