JavaScript 编译器之 Sucrase

编程杂货铺
1,491 阅读1分钟

Super-fast alternative to Babel for when you can target modern JS runtimes

JavaScript 编译器

名称说明
babelThe compiler for next generation JavaScript
TypeScriptTypeScript is JavaScript with syntax for types.
ESBuildAn extremely fast JavaScript bundler
swcSWC is an extensible Rust-based platform for the next generation of fast developer tools.
SucraseSucrase is an alternative to Babel that allows super-fast development builds.

Sucrase

提供了两个 cli 命令使用， sucrase 和 sucrase-node:

sucrase-node index.ts # 直接运行
sucrase ./srcDir -d ./outDir --transforms typescript,imports # 指定输入/输出路径，和需要转换类型

使用运行时

require("sucrase/register/ts");
require("sucrase/register");

esm 使用的代码

import {transform} from "sucrase";
const compiledCode = transform(code, {transforms: ["typescript", "imports"]}).code;

Sucrase 支持的转换类型

类型说明
jsx转换jsx/tsx
typescript将 ts -> js
flowcheck types
importscjs
react-hot-loader执行 react-hot-loader 项目中的等效转换
jest提升期望的 jest 方法调用上面的导入方式与 babel-plugin-jest-hoist 相同。

简单 demo 项目

{
  "name": "sucrase-demo",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "sucrase-node"
  },
  "keywords": [],
  "author": "Magnesium-",
  "license": "ISC",
  "dependencies": {
    "sucrase": "^3.25.0"
  }
}

使用 esm 的内容:

// /sucrase/tsx/index.tsx
import React from 'react'
const jsx = () => <div>sdfsdf</div>

// /sucrase/index.js
import sucrase from 'sucrase'
import fs from 'fs'

const js = fs.readFileSync('./tsx/index.tsx', 'utf-8')

const transformdCode = sucrase.transform(js, {
    transforms: ["typescript", "imports", "jsx"]
}).code

console.log(transformdCode)

Sucrase 在 wmr 中使用

// packages/wmr/src/plugins/sucrase-plugin.js

import * as sucrase from 'sucrase';

const cjsDefault = m => ('default' in m ? m.default : m);

const transform = cjsDefault(sucrase).transform;

// rollup 插件生命周期钩子：transform
const result = transform(code, {
    transforms,
    production: opts.production === true,
    filePath: id,
});

wmr 中两个地方用到：

  • 编译单个模块 packages/wmr/src/lib/compile-single-module.js
  • NoRollup 的获取插件 packages/wmr/src/lib/plugins.js

编译的各种 demo

为了使文章更加饱满，虽然介绍是一个小的不常见的模块，还要与其他的对比一下：with-js-compile， 目的是使用 pnpm workspace 介绍各种 js 编译器的基本使用。

参考

avatar
文章
阅读
粉丝