babel

This is the 16th day of my participation in the August Text Challenge.More challenges in August

Babel is a toolchain or javaScript compiler for converting ECMAScript 2015+ code to backward-compatible versions of javaScript in current and older browsers or environments. The official website lists some of Babel’s main features:

  • The syntax conversion
  • Polyfill our code makes it work in the target browser environment
  • Source code conversion
  • .

Babel is a tool written by JavaScript for parsing JS code, Github address github.com/babel/babel. At present, most of our front-end projects use Webpack to build our code. React uses the JSX syntax to develop components and pages. The JSX syntax contains both HTML template strings and javaScript code, which is not recognized by browsers. Therefore, a tool is needed to convert it into browser-recognized code. JavaScript.

Vue also uses the Babel tool to compile source code. The core module of Babel consists of only three modules, which are Babel /core, Babel/Parser, and Babel/Generator. First of all, core kernel is mainly responsible for the overall compilation process and runtime. Parser is a tool inside core to convert code into AST, which will go through syntax analysis, lexical analysis and so on. The final generator parses the AST into javaScript code that can be run for the browser, and the Babel process is complete.

Babel plug-in

If we can only compile our javaScript code, Babel cannot meet the current front-end engineering needs. In our daily development, we will use CSS preprocessors such as SCSS and LESS to enhance our development experience in order to write CSS styles conveniently. Some CSS properties may also be subject to browser version compatibility issues, so our carefully crafted pages may not look as good on older browsers, so Babel was designed with high cohesion and microkernels in mind from the beginning. All functions other than the core of Babel can be implemented through the Babel plug-in, which is also enriched by developing different plug-ins.

swc

Because of the complexity of front-end projects, we usually need towebpackPlugins package our code and need a lot of itbabelPlugin to compile our code, which causes our compile time to be longer, and secondly becausebabelIs made up ofjavaScriptLanguage development, so there are some performance issues.

A new build tool has emerged: SWC. According to official testing, SWC has at least 10 times better performance than Babel. SWC is a JS compiler developed based on Rust. It takes advantage of rust’s secure gc free and system-level language features to ensure performance close to native development. It also makes full use of multi-core CPUS and uses Rust for Jsbinding to reduce the occurrence of bugs. The SWC was based on neon’s JS binding, which was later switched to napi-rsgithub.com/napi-rs/nap due to the N-API release… The performance of SWC JS Plugin has been greatly improved after the migration. Recently, Next. Js has announced the use of SWC as a compilation tool, and WE believe that SWC will shine in the field of front-end engineering in the near future.