ES6 是 JavaScript 的重要更新版本，它带来了许多新特性和改进，包括箭头函数、let 和 const 声明、模板字面量、类和模块等。然而，ES6 的语法在一些老版本浏览器中无法直接运行，因此需要使用转译器进行处理。在这篇文章中，我们将探讨使用 Babel 转译 ES6 时可能遇到的问题以及如何解决它们。
1. 无法正确转译箭头函数
箭头函数是 ES6 中的一项重要特性，它可以让代码更加简洁易读。但在一些老版本的浏览器中，箭头函数会导致语法错误。例如下面这段箭头函数的代码：
const nums = [1, 2, 3]; const doubledNums = nums.map(num => num * 2);
在一些老版本浏览器中，这段代码会抛出一个语法错误。而且，如果使用默认的 Babel 配置进行转译，得到的代码也不是最优的。下面是默认的 Babel 转译结果：
const nums = [1, 2, 3];
const doubledNums = nums.map(function (num) {
return num * 2;
});这个结果仍然可以在浏览器中运行，但是显然不如原来的箭头函数代码简洁。
解决方案：配置 Babel 插件 @babel/plugin-transform-arrow-functions
使用 @babel/plugin-transform-arrow-functions 插件可以让 Babel 正确转译箭头函数。在 .babelrc 或 babel.config.js 中加入以下配置：
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}这样，上面的箭头函数代码将会被转译为如下形式：
const nums = [1, 2, 3];
const doubledNums = nums.map(function (num) {
return num * 2;
});2. 类成员函数中的 this 指向错误
在 ES6 中，类是一种新的对象类型，可以使用 class 声明来定义。类中的方法和属性可以被实例化后的对象调用。但在一些老版本浏览器中，类成员函数中的 this 指向错误，无法访问到正确的属性和方法。
例如，下面是一个使用了类的成员函数的例子：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
--------------- ---- -- ---------------
-
-
----- ------ - --- --------------
---------------在一些老版本浏览器中，输出结果会是 undefined，因为 speak 方法中的 this 指向错误。默认情况下，Babel 并不会修复这个问题。
解决方案：配置 Babel 插件 @babel/plugin-transform-classes
使用 @babel/plugin-transform-classes 插件可以帮助 Babel 正确转译类中的成员函数，修复 this 指向错误。在 .babelrc 或 babel.config.js 中，加入以下配置：
{
"plugins": ["@babel/plugin-transform-classes"]
}这样，上面的类成员函数中的 this 问题将会被修复。输出结果将会是正确的：
My name is Tom
3. 模块的默认导出和命名导出
在 ES6 中，模块是一种新的组织代码的方式，可以使用 export 和 import 语句来导出和导入模块中的内容。但是，老版本浏览器中可能无法直接使用模块的语法，需要使用转译来处理。在 Babel 转译模块时，可能会遇到模块的默认导出和命名导出问题。
3.1 模块的默认导出
ES6 中，可以使用 export default 语句来导出模块的默认内容。例如：
// fileA.js const name = 'Tom'; export default name; // fileB.js import myName from './fileA'; console.log(myName); // 输出 'Tom'
但是，在一些老版本浏览器中，无法正确处理默认导出的语法。默认情况下，Babel 会将默认导出转译为一个 default 属性。例如，上面的代码将会被转译为：
-- -------------------- ---- ------- -- -------- ----- ---- - ------ -------------- - - -------- ----- ----------- ---- -- -- -------- ----- ----- - ------------------- --------------------------- -- -- -----
如果你使用的是 AMD、CMD 等其他的模块加载器，在这种方式下可能会出现不兼容或无法使用的问题。
解决方案：配置 Babel 插件 @babel/plugin-proposal-export-default-from
使用 @babel/plugin-proposal-export-default-from 插件可以帮助 Babel 正确处理默认导出的语法。在 .babelrc 或 babel.config.js 中，加入以下配置：
{
"plugins": ["@babel/plugin-proposal-export-default-from"]
}这样，上面的代码将会被转译为：
// fileA.js const name = 'Tom'; export default name; // fileB.js import myName from './fileA'; console.log(myName); // 输出 'Tom'
3.2 模块的命名导出
ES6 中，也可以使用 export 语句来导出模块的命名内容。例如：
// fileC.js
export const num1 = 1;
export const num2 = 2;
// fileD.js
import { num1, num2 } from './fileC';
console.log(num1, num2); // 输出 1 2Babel 默认会将命名导出转译为 CommonJS 型的模块。例如，上面的代码将会被转译为：
-- -------------------- ---- ------- -- -------- ----- ---- - -- ----- ---- - -- -------------- - - ----- ----- ----- ---- -- -- -------- ----- ----- - ------------------- ----------------------- ------------
虽然这种转译方式可以在老版本浏览器中正确运行，但如果你使用的是 AMD、CMD 等其他的模块加载器，在这种方式下可能会出现不兼容或无法使用的问题。
解决方案：配置 Babel 插件 @babel/plugin-transform-modules-systemjs
使用 @babel/plugin-transform-modules-systemjs 插件可以让 Babel 正确转译模块的命名导出语法，生成 SystemJS 格式的模块。在 .babelrc 或 babel.config.js 中，加入以下配置：
{
"plugins": [
["@babel/plugin-transform-modules-systemjs", {
"systemGlobal": "System"
}]
]
}这样，上面的代码将会被转译为：
-- -------------------- ---- -------
-- --------
----- ---- - --
----- ---- - --
------------------------ --- -------- --------- --------- -
---- --------
------ -
-------- ---
-------- -------- -- -
--------------- ------
--------------- ------
-
--
---
-- --------
------------------- -------- --------- --------- -
---- --------
------ -
-------- ---
-------- -------- -- -
--- ------- - --------------- -- ---
--- ---- - -------------
--- ---- - -------------
----------------- ------
-
--
---注意，生成的 SystemJS 格式的模块需要在网页上加载 SystemJS 库之后才能正确运行。
总结
以上就是使用 Babel 转译 ES6 时可能遇到的问题及解决方案。虽然 Babel 可以帮助我们解决许多兼容性问题，但是对于一些特定的需求，我们可能需要手动调整配置和处理方式。这篇文章并不是深度的 Babel 使用指南，如果你想深入学习 Babel，可以参考官方文档进行学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ec701968c7c53b0d19792
