新一代的编译工具 SWC,97年小哥写的~

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。

最近前端圈掀起了一阵 rust 风,凡是能用 rust 重写的前端工具就用 rust 重写,今天介绍的工具就是通过 rust 实现的 bable:swc,一个将 ES6 转化为 ES5 的工具。

而且在 swc 的官网,很直白说自己和 babel 对标,swcbabel 命令可以相互替换,并且大部分的 babel 插件也已经实现。

8f5242f7d7f8c671c96c5b1db783b372.png

使用 rust 的一个优势就是快,比如我们之前的一个项目,将 babel 替换成 swc 后,编译速度从原来的 7 秒提升到了 1 秒,效率直接爆炸。

000b8b2968a863336dce921335a539d7.png

上手

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

  • @swc/cli 类似于 @babel/cli;

  • @swc/core 类似于 @babel/core;

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

通过如下命令,可以将一个 ES6 的 JS 文件转化为 ES5。

npx swc source.js -o dist.js

下面是 source.js 的代码:

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

代码中囊括了 ES6 的两个特性,const 声明箭头函数。经过 swc 转化后,这两个特性分别被转化成了 var 声明function 匿名函数

ce14551ff58b23ed95b22409b7cecca5.png

配置文件

swc 与 babel 一样,支持类似于 .babelrc 的配置文件:.swcrc,配置的格式为 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 的插件系统被 swc 整合成了 jsc.parser 内的配置,基本上大部分插件都能照顾到。而且,swc 还继承了压缩的能力,通过 minify 属性开启,jsc.minify 用于配置压缩相关的规则,更详细的配置可查看文档。

Node APIs

通过在 node.js 代码中,导入 @swc/core 模块,可以在 node.js 中调用 api 直接进行代码的编译,这对 CLI 工具的开发来说是常规操作。

// 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()
201e7fb8e69a3b56ee096d4f3aab680a.png

打包代码

除了将代码转义,swc 还提供了一个简易的打包能力。我们新建一个 src 文件夹,在里面新建两个文件:index.jsutils.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)
}

可以看到 index.js 导入了 utils.js 中的一个方法,然后我们新建一个 spack.config.js 文件,该文件是 swc 打包的配置文件。

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

然后在命令行运行:

$ npx spack
4d7b202de43753918ee0ee1ed3a79bb3.png

打包成功后,会在 dist 目录输出一个 web.js 文件。

9aec54ae7fcaebd2f1ace6385f6665cc.png

可以看到,不仅将 index.jsutils.js 打包成了一个文件,还进行了 tree shaking,将 utils.js 中没有使用的 errorLog 方法删掉了。

能不能用?

babel 毕竟经过了这么多年的发展,不管是 bug 输了,还是社区活跃度都远远优于 swc。所以,如果是小产品试水还是可以试一下 swc 的,旧项目如果已经使用了 babel 还是不建议进行迁移。

在使用的过程,还是发现了一些小问题。比如,如果我使用了 async function,swc 会自动导入 regenerator-runtime 模块。

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

调用 swc 编译后,代码如下:

a501aafa858d34055578596b13615799.png

这个结果看起来是没问题的,但是 swc 与 babel 类似,也有 helpers(@swc/helpers),同时提供了 externalHelpers 开关, 如果把 externalHelpers 设置为 true,swc 会将一些工具类,通过模块的形式导入。

// .swcrc
{"jsc": {"externalHelpers": true}
}
22429608e07a13fe5413d13001983091.png

externalHelpers 的默认值是 false,那这个时候,regenerator-runtime ,到底是通过模块的形式导入,还是把整个代码写入到文件?

swc 正好有个 issue [https://github.com/swc-project/swc/issues/1461] 在讨论这个问题。

除了上面说的这个问题,其实还有一点,就是作者觉得之前的架构有问题,正在加紧重写 2.0 版本,感觉可以期待一下,另外提一句,swc 的作者是一个 97 年的韩国小哥,目前大学都还没毕业,最后我也只能说一句:牛逼!

- END -

d0d4e7ce4e250cc5c35385d113781b9a.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动,帮助3000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

943740439505892b3ee941870f37bcc1.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274984.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

粉红噪音_粉红的常绿力量

粉红噪音I use Instagram. But I don’t use Instagram in the way that my daughters, who are 21 and 14, use Instagram. More to the point, Instagram doesn’t use me in quite the same way it uses my daughters.我使用Instagram。 但是,我不会像21岁和14岁…

Sql Server 中存储过程的output return的区别

看http://zxianf.blog.163.com/blog/static/301207012009114104124969/中片关于Sql Server中存储过程output和return值的区别 在里面有讲解,我在自己本机中测试的结果如下, 1:ReturnValue只能返回0,1,-1这样的数据,局限性很大 &am…

1个月增长15000 star,zx 库写shell脚本真不错~

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。今天来讨论一个牛逼…

灰色边框阴影_50种暗模式灰色阴影

灰色边框阴影If you’re an avid dark mode user like me, you’ll know that dark mode isn’t just about white text on black backgrounds. In a single app, a handful of shades of gray give the app some depth. And across various apps, the spectrum of gray become…

Android源代码下载

为什么80%的码农都做不了架构师?>>> Android代码使用git管理, 所以关于Android源码下载一般来说要安装git. 本文是讲述只使用Eclipse完成Android源码下载和关联. 下载Eclipse,目前最新版本是Juno,自带了EGit插件-->Eclipse Git插件 那么可以使用EGit…

v-charts加载动画_加载动画-用户体验写作练习

v-charts加载动画Many new UX writers often struggle to find the balance between creativity and clarity. You can’t make everything fun/exciting/interesting as it can have an adverse effect on usability. But there are times when you can add a bit of flair.许…

34岁回顾人生,也怕中年危机!

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。最近发生一件令人感…

svg动画制作_制作第一个SVG动画

svg动画制作Story of a designer trying to code animations instead of asking a dev to figure it out.一位设计师尝试编写动画代码而不是要求开发人员弄清楚动画的故事。 编码动画是Webdesign的未来 (Coded animations are the future of Webdesign) Because we have acces…

网站前端设计,从960框架开始

一个网站进入到前端设计阶段,第一步肯定是为全站搭建一个统一的,基础的HTML模型,在这里推荐一下我刚学习的960框架。960是一个CSS框架,你肯定在想,这个世界肯定是疯了,连CSS都有框架了吗,没错&a…

60+ 实用 React 工具库,助力你高效开发!

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。最近看到一些实用的…

2012年12月第二个周末

2019独角兽企业重金招聘Python工程师标准>>> 这周,装上了windows版的 Linux版的oracle 熟悉了下SQL*PLUS的编程规则,还有常用的linux命令 看了一本《简爱》 正在看oracle 转载于:https://my.oschina.net/u/204616/blog/545513

『C#基础』调用CMD的一个小工具

由于经常要使用CMD的一些命令,比如查看IP,Ping一个网址之类的。于是就写了一个调用CMD.exe的小工具。 主要就是实现这样一个事情:调用CMD.exe然后传给它我想要执行的命令,最后获取结果。 界面: 代码: 主要执…

小姐姐:如何参与大型开源项目-Taro 共建

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。“本文来自前端程序…

JavaWeb学习总结(十七)——JSP中的九个内置对象

2019独角兽企业重金招聘Python工程师标准>>> 一、JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理。JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet) ,然…

C#网络编程(异步传输字符串) - Part.3[转自JimmyZhang博客]

源码下载:http://www.tracefact.net/SourceCode/Network-Part3.rar C#网络编程(异步传输字符串) - Part.3 这篇文章我们将前进一大步,使用异步的方式来对服务端编程,以使它成为一个真正意义上的服务器:可以为多个客户端的多次请求…

chrome黑暗模式_黑暗模式:如何克服黑暗面

chrome黑暗模式This article has been written by Redmadrobot Design Lab. Translated and reposted with permission by Alconost Inc., professional translation and localization company.本文由 Redmadrobot设计实验室 撰写 。 经过 专业翻译和本地化公司 Alconost Inc.的…

Deco 智能代码体验版正式上线啦,快来体验设计稿一键生成代码~

Deco 是什么?—Deco 智能代码项目是我们团队在「前端智能化」方向上的探索,其聚焦设计稿一键生成多端代码这一切入点,实现将 Sketch/Photoshop 等设计稿进行解析并直接生成多端代码(Taro/React/Vue)的能力。Deco 可以使…

平面设计和网页设计的规则_从平面设计到用户界面:这是您应该知道的最重要的规则

平面设计和网页设计的规则Maybe you’re here because you think UI Design is the future of Graphic Design. Maybe what motivates you is the money. Or maybe you just woke up one day and someone at work told you “So, you are a designer, right? Well, we need an…

即将到来的 ECMAScript 2022 新特性

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。ECMAScript 规范每…

设计类的五个原则_内容设计的5个原则

设计类的五个原则重点 (Top highlight)There are many heuristics and principles for creating good content. Some are created from a UX perspective, others from a content marketing point of view. They range from very long to very concise ones. I reviewed a larg…