兽医用品
最近前端圈掀翻了一阵 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再获年度编程话语，微软或成最大赢家