最近前端圈掀翻了一阵 rust 风，但凡能用 rust 重写的前端器用就用 rust 重写，今天先容的器用即是通过 rust 终了的 bable：swc，一个将 ES6 振荡为 ES5 的器用。
而且在 swc 的官网，很直白说我方和 babel 对标，swc 和 babel 敕令不错相互替换，何况大部分的 babel 插件曾经经终了。
使用 rust 的一个上风即是快，比如咱们之前的一个名堂，将 babel 替换成 swc 后，编译速率从原本的 7 秒进步到了 1 秒，后果平直爆炸。
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 匿名函数。
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()
除了将代码转义，swc 还提供了一个浮浅的打包技艺。咱们新建一个 src 文献夹，在内部新建两个文献：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) }
不错看到 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
打包告捷后，会在 dist 目次输出一个 web.js 文献。
不错看到，不仅将 index.js、utils.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 编译后，代码如下：
这个截至看起来是没问题的，可是 swc 与 babel 雷同，也有 helpers(@swc/helpers)，同期提供了 externalHelpers 开关， 若是把 externalHelpers 建立为 true，swc 会将一些器用类，通过模块的神志导入。
// .swcrc { "jsc": { "externalHelpers": true } }
而 externalHelpers 的默许值是 false，那这个时刻，regenerator-runtime ，到底是通过模块的神志导入，照旧把所有这个词代码写入到文献?
swc 恰恰有个 issue [https://github.com/swc-project/swc/issues/1461] 在接续这个问题。
除了上头说的这个问题，其实还有少许，即是作家合计之前的架构有问题，正在加紧重写 2.0 版块，嗅觉不错期待一下，另外提一句，swc 的作家是一个 97 年的韩国小哥，现在大学都还没毕业，临了我也只可说一句：过劲!
【裁剪保举】
鸿蒙官方政策互助共建——HarmonyOS技能社区 Kubernetes容器平台架构解读 支付宝 App 集五福版发布：福相伴，五福，偶而到！ Windows 11 22526新版成立多数问题！新特色抢先看 WiFi7有多强？比WiFi6高三倍，速率快如飞 Python再获年度编程说话，微软或成最大赢家