最强cba艾弗森组合

admin · 2012-02-01

  

  近来前端圈掀起了一阵 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;

npmi-D@swc/cli@swc/core

  经由过程如下号召,可能将一个 ES6 的 JS 文献转化为 ES5。

  

npxswcsource.js-odist.js

  上面是 source.js 的代码:

  

conststart=()=>{console.log(appstarted)}

  代码中席卷了 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"//只兼容到ie11},"corejs":"3"//corejs的版本},"minify":true//能否开启紧缩}

  babel 的插件体系被 swc 整分解了 jsc.parser 内的设置,基础上大个别插件都能助衬到。并且,swc 还经受了紧缩的才能,经由过程 minify 属性开启,jsc.minify 用于设置紧缩相干的轨则,更细致的设置可检查文档。

   Node APIs

  经由过程正在 node.js 代码中,导入 @swc/core 模块,可能正在 node.js 中挪用 api 直接实行代码的编译,这对 CLI 用具的开辟来讲是惯例操纵。

  

//swc.mjsimport{readFileSync}fromfsimport{transform}from@swc/coreconstrun=async()=>{constcode=readFileSync(./source.js,utf-8)constresult=awaittransform(code,{filename:"source.js",})//输出编译子女码console.log(result.code)}run()

   打包代码

  除了将代码本义,swc 还供给了一个方便的打包才能。咱们新筑一个 src 文献夹,正在外面新筑两个文献:index.js、utils.js。

  

//src/index.jsimport{log}from./utils.jsconststart=()=>log(appstarted)start()
//src/utils.jsexportconstlog=function(){console.log(...arguments)}exportconsterrorLog=function(){console.error(...arguments)}

  可能看到 index.js 导入了 utils.js 中的一个法子,而后咱们新筑一个 spack.config.js 文献,该文献是 swc 打包的设置文献。

  

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

  而后正在号召交运转:

  

$npxspack

  打包获胜后,会正在 dist 目次输出一个 web.js 文献。

  

  可能看到,不但将 index.js、utils.js 打包成了一个文献,还实行了 tree shaking,将 utils.js 中没有操纵的 errorLog 法子删掉了。

   能不克不及用?

  babel 到底进程了这么众年的起色,不论是 bug 输了,依旧社区活动度都远远优于 swc。以是,即使是小产物试水依旧可能试一下 swc 的,旧名目即使仍旧操纵了 babel 依旧不提议实行转移。

  正在操纵的历程,依旧浮现了少许小题目。例如,即使纵了 async function,swc 会主动导入 regenerator-runtime 模块。

  

//编译前,有个async法子conststart=async()=>{console.log(appstarted)}

  挪用 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再获年度编程讲话,微软或成最大赢家

文章推荐:

cctv怎么看欧洲杯直播表

cba回放中心

nba公众号

cba视频直播网站