用 babel 编译一个js的过程

理解一下 babel es6→es5 的过程

01 安装必要的包

通过yarn 安装需要的包

yarn add @babel/core @babel/preset-env

02 修改 package.json 的 type

最终 package.json 为这样的效果

{
  "type": "module",
  "dependencies": {
    "@babel/core": "^7.24.7",
    "@babel/preset-env": "^7.24.7"
  }
}

03 准备 code.js

示例代码

const a =1;
const fn1 = () => 2;

Promise.resolve().then(() => {
  console.log(a, fn1());
});

Object.assign({ a: 2 }, { c: 23 })

function greet(input) {
  return input ?? "Hello world";
}

console.log(greet(false))

04 准备编译的文件

即将 code.js 转为 es5的 nodejs 脚本

import babel from '@babel/core'
import fs from 'fs';

const code = fs.readFileSync('./code.js', 'utf8');
const result = babel.transform(code, {
  presets: ['@babel/preset-env']
});

console.log(result.code);
babel js es6 es5