Babel 基础使用 #

# 编译单个文件
npx babel src/index.js

# 编译并输出到文件
npx babel src/index.js --out-file dist/index.js
npx babel src/index.js -o dist/index.js

# 编译整个目录
npx babel src --out-dir dist
npx babel src -d dist

# 编译并生成 source map
npx babel src -d dist --source-maps
npx babel src -d dist -s

# 监听文件变化
npx babel src -d dist --watch
npx babel src -d dist -w

# 使用默认配置文件 babel.config.js
npx babel src -d dist

# 指定配置文件
npx babel src -d dist --config-file ./custom-babel.config.js

# 显示当前配置
npx babel --show-config

# 使用预设
npx babel src -d dist --presets @babel/preset-env

# 使用多个预设
npx babel src -d dist --presets @babel/preset-env,@babel/preset-react

# 使用插件
npx babel src -d dist --plugins @babel/plugin-transform-arrow-functions

const babel = require('@babel/core');

const code = 'const fn = () => 42;';

const result = babel.transformSync(code, {
  presets: ['@babel/preset-env']
});

console.log(result.code);
// "var fn = function fn() { return 42; };"

const babel = require('@babel/core');

async function compile() {
  const code = 'const fn = () => 42;';

  const result = await babel.transformAsync(code, {
    presets: ['@babel/preset-env']
  });

  console.log(result.code);
}

compile();

const babel = require('@babel/core');

// 同步编译文件
const result = babel.transformFileSync('./src/index.js', {
  presets: ['@babel/preset-env']
});

console.log(result.code);

// 异步编译文件
babel.transformFile('./src/index.js', {
  presets: ['@babel/preset-env']
}, (err, result) => {
  if (err) throw err;
  console.log(result.code);
});

const babel = require('@babel/core');
const parser = require('@babel/parser');

const code = 'const fn = () => 42;';

// 解析为 AST
const ast = parser.parse(code);

// 从 AST 编译
const result = babel.transformFromAstSync(ast, code, {
  presets: ['@babel/preset-env']
});

console.log(result.code);

const babel = require('@babel/core');

const code = 'const fn = () => 42;';

const result = babel.parseSync(code, {
  sourceType: 'module'
});

console.log(result.program.body);

// 输入
const add = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;
const obj = {
  method: () => this.value
};

// 输出
var add = function add(a, b) {
  return a + b;
};
var greet = function greet(name) {
  return "Hello, ".concat(name, "!");
};
var obj = {
  method: function method() {
    return this.value;
  }
};

// 输入
let x = 1;
const y = 2;
if (true) {
  let x = 3;
}

// 输出
var x = 1;
var y = 2;
if (true) {
  var _x = 3;
}

// 输入
const name = 'World';
const greeting = `Hello, ${name}!`;
const multi = `
  Line 1
  Line 2
`;

// 输出
var name = 'World';
var greeting = "Hello, ".concat(name, "!");
var multi = "\n  Line 1\n  Line 2\n";

// 输入
const { a, b } = obj;
const [x, y] = arr;
const { name: userName, age = 18 } = person;

// 输出
var a = obj.a,
    b = obj.b;
var x = arr[0],
    y = arr[1];
var userName = person.name,
    _person$age = person.age,
    age = _person$age === void 0 ? 18 : _person$age;

// 输入
const arr = [...items, 4, 5];
const obj = { ...defaults, name: 'custom' };

// 输出
var arr = [].concat(items, [4, 5]);
var obj = Object.assign({}, defaults, { name: 'custom' });

// 输入
function greet(name = 'World') {
  return `Hello, ${name}!`;
}

// 输出
function greet() {
  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'World';
  return "Hello, ".concat(name, "!");
}

// 输入
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }

  static create(name) {
    return new Person(name);
  }
}

// 输出
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Person = function () {
  function Person(name) {
    _classCallCheck(this, Person);
    this.name = name;
  }

  var _proto = Person.prototype;
  _proto.greet = function greet() {
    return "Hello, ".concat(this.name, "!");
  };

  Person.create = function create(name) {
    return new Person(name);
  };

  return Person;
}();

// 输入
class Counter {
  count = 0;
  #privateField = 42;

  increment = () => {
    this.count++;
  }
}

// 输出
var _privateField = new WeakMap();

var Counter = function Counter() {
  _classCallCheck(this, Counter);

  this.count = 0;

  _privateField.set(this, {
    writable: true,
    value: 42
  });

  this.increment = () => {
    this.count++;
  };
};

// 输入
import { foo, bar } from './module';
import * as utils from './utils';
export const name = 'Babel';
export default function() {}

// 输出 (CommonJS)
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.name = void 0;

var _module = require("./module");
var utils = _interopRequireWildcard(require("./utils"));

function _getRequireWildcardCache() { ... }

function _interopRequireWildcard(obj) { ... }

var name = 'Babel';
exports.name = name;

function _default() {}
exports.default = _default;

// 输入
async function fetchData() {
  const response = await fetch('/api');
  const data = await response.json();
  return data;
}

// 输出
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { ... }

function _asyncToGenerator(fn) { ... }

function fetchData() {
  return _fetchData.apply(this, arguments);
}

function _fetchData() {
  _fetchData = _asyncToGenerator(function* () {
    var response = yield fetch('/api');
    var data = yield response.json();
    return data;
  });
  return _fetchData.apply(this, arguments);
}

// 输入
const name = user?.profile?.name;
const result = obj.method?.();

// 输出
var _user$profile, _obj$method;

var name = user === null || user === void 0 ? void 0 : (_user$profile = user.profile) === null || _user$profile === void 0 ? void 0 : _user$profile.name;
var result = obj === null || obj === void 0 ? void 0 : (_obj$method = obj.method) === null || _obj$method === void 0 ? void 0 : _obj$method.call(obj);

// 输入
const value = input ?? 'default';
const result = a ?? b ?? c;

// 输出
var _input;

var value = (_input = input) !== null && _input !== void 0 ? _input : 'default';
var result = (_ref = (_ref2 = a !== null && a !== void 0 ? a : b) !== null && _ref2 !== void 0 ? _ref2 : c) !== null && _ref !== void 0 ? _ref : void 0;

// 配置
{
  presets: [
    ['@babel/preset-react', { runtime: 'classic' }]
  ]
}

// 输入
const element = <div className="app">Hello</div>;

// 输出
var element = React.createElement('div', { className: 'app' }, 'Hello');

// 配置
{
  presets: [
    ['@babel/preset-react', { runtime: 'automatic' }]
  ]
}

// 输入
const element = <div className="app">Hello</div>;

// 输出
import { jsx as _jsx } from 'react/jsx-runtime';
var element = _jsx('div', { className: 'app', children: 'Hello' });

// 输入
const name = 'World';
const element = (
  <div className="container">
    <h1>Hello, {name}!</h1>
    {showMessage && <p>Welcome!</p>}
  </div>
);

// 输出
var name = 'World';
var element = React.createElement('div', {
  className: "container"
}, React.createElement('h1', null, "Hello, ", name, "!"), showMessage && React.createElement('p', null, "Welcome!"));

// 输入
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: 'Babel',
  age: 10
};

function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 输出
var user = {
  name: 'Babel',
  age: 10
};

function greet(name) {
  return "Hello, ".concat(name, "!");
}

// 输入
function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>('hello');

// 输出
function identity(arg) {
  return arg;
}

var result = identity('hello');

// 输入
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// 输出
var Direction;

(function (Direction) {
  Direction["Up"] = "UP";
  Direction["Down"] = "DOWN";
  Direction["Left"] = "LEFT";
  Direction["Right"] = "RIGHT";
})(Direction || (Direction = {}));

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

// 源代码
const arr = [1, 2, 3].includes(2);
const promise = Promise.resolve();
Object.assign({}, { a: 1 });

// 编译后
import "core-js/modules/es.array.includes.js";
import "core-js/modules/es.object.assign.js";
import "core-js/modules/es.promise.js";

var arr = [1, 2, 3].includes(2);
var promise = Promise.resolve();
Object.assign({}, { a: 1 });

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'entry',
      corejs: 3
    }]
  ]
};

// 入口文件
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// Babel 会根据目标环境替换为具体的 polyfill

// 按需引入
import 'core-js/modules/es.promise';
import 'core-js/modules/es.array.includes';

const arr = [1, 2, 3].includes(2);
const promise = Promise.resolve();

npm install @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime', {
      corejs: 3,        // 使用 core-js@3
      helpers: true,    // 使用辅助函数
      regenerator: true // 使用 regenerator
    }]
  ]
};

// 不使用 runtime 插件
// 每个文件都会内联辅助函数
function _classCallCheck(instance, Constructor) { ... }

class Person { ... }

// 使用 runtime 插件
// 辅助函数从 @babel/runtime 引入
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';

class Person { ... }

# 项目结构
project/
├── src/
│   └── index.js
├── dist/
├── babel.config.js
└── package.json

# 编译
npx babel src/index.js -o dist/index.js

# 项目结构
project/
├── src/
│   ├── index.js
│   ├── utils.js
│   └── components/
│       └── Button.js
├── dist/
└── babel.config.js

# 编译
npx babel src -d dist

npx babel src -d dist --source-maps

# 开发时使用
npx babel src -d dist --watch

# 同时复制 CSS、图片等文件
npx babel src -d dist --copy-files

# 支持编译 .ts 和 .tsx 文件
npx babel src -d dist --extensions .ts,.tsx

{
  "scripts": {
    "build": "babel src -d dist",
    "build:prod": "BABEL_ENV=production babel src -d dist",
    "dev": "babel src -d dist --watch",
    "build:source-map": "babel src -d dist --source-maps",
    "build:copy": "babel src -d dist --copy-files"
  }
}

# 输出到控制台
npx babel src/index.js

# 显示详细信息
npx babel src -d dist --verbose

# 显示当前配置
npx babel --show-config

# 显示特定环境配置
BABEL_ENV=production npx babel --show-config

const babel = require('@babel/core');

const code = 'const x = 1;';

const ast = babel.parseSync(code);
console.log(JSON.stringify(ast, null, 2));

// 检查是否安装了预设
npm install --save-dev @babel/preset-env

// 检查配置文件
module.exports = {
  presets: ['@babel/preset-env']
};

// 确保 corejs 配置正确
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

// 安装插件
npm install --save-dev @babel/plugin-proposal-class-properties

// 配置
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties']
};