适配IE11（通过Babel+core-js转译ES6语法）

Babel 是现代 JavaScript 开发的核心工具，它能将 ES6+ 代码转译为向后兼容的 JavaScript 版本，让我们能够在各种环境中使用最新的语言特性。

Babel 简介

什么是 Babel？

Babel 是一个 JavaScript 编译器，主要用于：

• 将 ES6+ 语法转换为 ES5 语法
• 支持实验性的 JavaScript 特性
• 添加缺失的 polyfill 来支持新的 API
• 进行代码转换和优化

核心概念

• 预设 (Presets): 预配置的插件集合
• 插件 (Plugins): 执行具体转换的代码
• Polyfill: 为不支持的环境提供新 API 的实现
• 目标环境 (Targets): 指定需要支持的浏览器或 Node.js 版本

安装 Babel

核心包安装

# 安装 Babel 核心包和 CLI 工具 npm install --save-dev @babel/core @babel/cli# 安装最常用的预设 npm install --save-dev @babel/preset-env# 安装运行时支持（可选） npm install --save-dev @babel/polyfill core-js@3

依赖说明

• @babel/core: Babel 的核心编译器
• @babel/cli: 命令行工具
• @babel/preset-env: 智能预设，根据目标环境自动确定需要的转换
• core-js: 现代 JavaScript 特性的 polyfill 库

配置 Babel

1. 使用配置文件 (推荐)

创建 babel.config.js 文件：

module.exports = {presets: [['@babel/preset-env',{// 目标环境配置targets: {node: 'current', // 针对当前 Node.js 版本browsers: ['> 1%', 'last 2 versions', 'not dead'], // 浏览器兼容性},// Polyfill 配置useBuiltIns: 'usage', // 按需引入 polyfillcorejs: 3, // 指定 core-js 版本// 模块转换配置modules: false, // 保留 ES6 模块语法（用于 webpack 等工具的 tree-shaking）},],],plugins: [// 可选的插件'@babel/plugin-proposal-class-properties', // 支持类属性语法'@babel/plugin-proposal-optional-chaining', // 可选链操作符'@babel/plugin-proposal-nullish-coalescing-operator', // 空值合并操作符],// 环境特定配置env: {development: {plugins: ['@babel/plugin-transform-runtime'], // 开发时优化},production: {plugins: ['@babel/plugin-transform-runtime',['babel-plugin-transform-remove-console', { exclude: ['error', 'warn'] }], // 移除 console.log],},test: {presets: [['@babel/preset-env',{targets: { node: 'current' },modules: 'commonjs', // 测试环境使用 CommonJS},],],},}, };

2. 常用预设配置

基础配置

module.exports = {presets: [['@babel/preset-env',{targets: {browsers: ['> 1%', 'last 2 versions'],},useBuiltIns: 'usage',corejs: 3,},],], };

Node.js 项目配置

module.exports = {presets: [['@babel/preset-env',{targets: {node: '16', // 指定 Node.js 版本},useBuiltIns: 'usage',corejs: 3,},],], };

浏览器项目配置

module.exports = {presets: [['@babel/preset-env',{targets: {browsers: ['Chrome >= 60','Safari >= 10.1','iOS >= 10.3','Firefox >= 54','Edge >= 15',],},useBuiltIns: 'entry',corejs: 3,},],], };

3. package.json 配置方式

也可以在 package.json 中配置：

{"babel": {"presets": [["@babel/preset-env",{"targets": {"node": "current"},"useBuiltIns": "usage","corejs": 3}]]} }

重要配置选项详解

useBuiltIns 配置

控制如何处理 polyfill：

// 'entry' - 在入口文件导入整个 polyfill {useBuiltIns: 'entry',corejs: 3 }// 'usage' - 按需自动导入（推荐） {useBuiltIns: 'usage',corejs: 3 }// false - 不自动添加 polyfill {useBuiltIns: false }

targets 配置

指定目标环境：

{targets: {// Node.js 版本node: '16',node: 'current',// 浏览器查询browsers: ['> 1%', 'last 2 versions'],browsers: ['Chrome >= 60', 'Safari >= 10'],// 特定浏览器版本chrome: '60',firefox: '54',safari: '10',ie: '11'} }

modules 配置

控制模块转换：

{modules: false, // 保留 ES6 模块（用于 webpack tree-shaking）modules: 'commonjs', // 转换为 CommonJS（Node.js）modules: 'amd', // 转换为 AMDmodules: 'umd', // 转换为 UMDmodules: 'auto' // 自动检测 }

添加构建脚本

在 package.json 中添加构建脚本：

{"scripts": {"build": "babel src --out-dir dist","build:watch": "babel src --out-dir dist --watch","build:sourcemaps": "babel src --out-dir dist --source-maps","clean": "rm -rf dist"} }

常用 CLI 选项

# 基础编译 babel src --out-dir dist# 监听文件变化 babel src --out-dir dist --watch# 生成 source maps babel src --out-dir dist --source-maps# 忽略特定文件 babel src --out-dir dist --ignore "**/*.test.js"# 复制非 JS 文件 babel src --out-dir dist --copy-files# 详细输出 babel src --out-dir dist --verbose

高级配置

1. 插件配置

安装和配置常用插件：

# 安装插件 npm install --save-dev @babel/plugin-proposal-class-properties npm install --save-dev @babel/plugin-proposal-optional-chaining npm install --save-dev @babel/plugin-transform-runtime

module.exports = {plugins: [// 类属性语法'@babel/plugin-proposal-class-properties',// 可选链操作符 (?.)'@babel/plugin-proposal-optional-chaining',// 空值合并操作符 (??)'@babel/plugin-proposal-nullish-coalescing-operator',// 运行时转换（减少重复代码）['@babel/plugin-transform-runtime',{corejs: 3,helpers: true,regenerator: true,},],], };

2. 环境特定配置

module.exports = {presets: ['@babel/preset-env'],env: {// 开发环境development: {plugins: ['@babel/plugin-transform-runtime'],sourceMaps: 'inline',},// 生产环境production: {plugins: ['@babel/plugin-transform-runtime','babel-plugin-transform-remove-console',],minified: true,},// 测试环境test: {presets: [['@babel/preset-env', { targets: { node: 'current' } }]],},}, };

常见问题和解决方案

1. Polyfill 相关问题

问题: regeneratorRuntime is not defined
解决: 添加 regenerator-runtime polyfill

npm install --save regenerator-runtime

// 在入口文件顶部添加 import 'regenerator-runtime/runtime';

2. 模块导入问题

问题: 在浏览器中使用时模块导入失败
解决: 检查 modules 配置

// 浏览器环境 {modules: false // 保留 ES6 模块供打包工具处理 }// Node.js 环境 {modules: 'commonjs' // 转换为 CommonJS }

3. 性能优化

问题: 编译速度慢
解决: 使用缓存和优化配置

module.exports = {// 启用缓存cacheDirectory: true,presets: [['@babel/preset-env',{// 只转换需要的特性targets: '> 1%',// 使用松散模式（更快但不严格兼容）loose: true,},],], };

验证配置

1. 测试转译

创建测试文件 src/test.js：

// ES6+ 语法示例 const greet = (name = 'World') => {console.log(`Hello, ${name}!`); };class Person {name = 'Default';constructor(name) {this.name = name;}sayHello() {greet(this.name);} }export { Person, greet };

运行转译：

npm run build

检查输出文件 dist/test.js 是否正确转译。

2. 检查 Polyfill

查看转译后的代码是否正确添加了所需的 polyfill。

与其他工具集成

1. 与 Jest 集成

在 Jest 配置中使用 Babel：

// jest.config.js module.exports = {transform: {'^.+\\.js$': 'babel-jest',}, };

2. 与 Webpack 集成

// webpack.config.js module.exports = {module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',},},],}, };