babel VS swc

SWC is a JavaScript/TypeScript compiler similar to Babel, but because SWC uses Rust, it has better performance than Babel.

The performance bottleneck of both WebPack and Bable lies in THE JS language, with the emergence of tools such as Esbuild for Go and SWC for Rus. Esbuild wants to open a new era of building tool performance and create an easy-to-use modern packer, while SWC aims to replace Babel. In Comparison with Babel, we can see that the SWC team has rewritten a number of Bable plug-ins to enhance SWC capabilities.

SWC also provides a build packaging tool, Spack. This tool is not a complete build tool, but we can use this tool to briefly experience SWC’s capabilities.

The use of SWC

We can use the SPack command provided by SWC to quickly package commonJS, ES6, AMD, umD when writing a simple tool library.

1. Install SWC dependencies

npm i -D @swc/core @swc/cli
Copy the code

or

yarn add --dev @swc/core @swc/cli
Copy the code

2. Configuration spack

We can configure the script in package.json to compile directly using spack provided by @swc/ CLI, so we just need to add the configuration file spack.config.js to the root directory of the project and write the configuration. For details about configuration items, see the documentation

const { config } = require("@swc/core/spack");

module.exports = config({
  // Import file
  entry: __dirname + "/src/index.ts"./ / output
  output: {
    path: __dirname + "/dist",},// SWC compile configuration
  options: {jsc: {
        // Parse the configuration
        parser: {
          syntax: "typescript".// Enter file format
          tsx: false.// Whether TSX is supported
          dynamicImport: false.// Whether dynamic import is supported
          decorators: false.// Whether decorators are supported
        },
        transform: null.target: "es5".// Translation target
        loose: false.externalHelpers: false.keepClassNames: false
      },
      // Output file configuration
      module: {
          type: "commonjs".strict: false.strictMode: true.lazy: false.noInterop: false.ignoreDynamic: false}}});Copy the code

3. The configuration script

In packge.json

 "scripts": {
    "build": "spack"
  }
Copy the code

You can then compile using NPM Run Build

conclusion

The emergence of front-end building tools such as SWC and ESBuild reminds us that the performance of the JS language limits the effectiveness of the front-end tool chain. We can do better by introducing other high-performance languages, such as using compilation tools written in other languages to enhance the compilation performance of the DSL in the project.