项目工程结构设计

插件与预设

Babel中可以通过命令行调用：

• npm i @babel/cli

在babel中有大量的用于支持特定语法的插件：

• @babel/plugin-transform-instanceof
• @babel/plugin-transform-for-of

为了便于管理，在插件之上又进行了一次封装，可以使用预设来集中管理插件：

• @babel/preset-env它能让你使用最新的 JavaScript 语法而无需操心对目标环境所支持的语法设置相应的语法转换插件（以及可选的 polyfills）。这样能让你的工作更轻松，也能让打出来的 JavaScript 包更小！

常用配置

常用的插件与预设：

"scripts": {
    "build": "babel src --out-dir dist"
},
"dependencies": {
    "@babel/cli": "^7.28.3",
    "@babel/core": "^7.28.4",
    "@babel/plugin-transform-arrow-functions": "^7.27.1",
    "@babel/preset-env": "^7.28.3"
}

// babel.config.json 配置文件
{
	"plugins":["@babel/plugin-transform-arrow-functions"],
    "presets": ["@babel/preset-env"]
}

// 编译前
const say = () => {
    console.log('Hello Babel')
}

// 编译后
"use strict";

var say = function say() {
  console.log('Hello Babel');
};