前言
随着 ES6（ES2015）的发布，JavaScript 的语法越来越多样化和强大，但是一些浏览器版本还不支持这些新语法，为此就需要使用 Babel 转译 ES6 语法到 ES5 语法，以确保代码的兼容性。Babel 可以通过使用预设（preset）来进行一次性地配置多个插件，这里介绍一个常用的预设——babel-preset-es2015-loose-native-modules，它用来转译 ES2015 的模块系统，以确保模块的正确性和兼容性。
安装
使用 Babel 的过程中，需要安装多个依赖项，其中包括 babel-preset-es2015-loose-native-modules。
使用 npm 安装：
npm install babel-preset-es2015-loose-native-modules --save-dev
或者使用 Yarn 安装：
yarn add babel-preset-es2015-loose-native-modules --dev
配置
在 .babelrc 文件中进行配置，将 babel-preset-es2015-loose-native-modules 添加进去：
{
"presets": [
"es2015-loose-native-modules"
]
}示例
在使用 babel-preset-es2015-loose-native-modules 的过程中，可能会涉及到一些常见的语法特性，下面介绍几个示例：
import/export
使用 ES6 的 import/export 语法时，需要通过 babel-preset-es2015-loose-native-modules 来进行转译。示例代码如下：
// main.js
import { add } from './math.js';
console.log(add(1, 2));
// math.js
export function add(a, b) {
return a + b;
}这里，main.js 中使用 import 引入了 math.js 中的 add 函数，并进行了简单的加法运算，在控制台输出了结果。
Promise
使用 ES6 的 Promise 语法时，同样需要通过 babel-preset-es2015-loose-native-modules 来进行转译。示例代码如下：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- -- -
------------------- ----
---
-
----- -------- ----------------- --- -
----- ------------
-------------------
-
----------------- ------- ------这里，使用 Promise 的方式来进行延时操作，以等待 1s 后输出字符串 'hello world'。
Class
使用 ES6 的 Class 语法时，同样需要通过 babel-preset-es2015-loose-native-modules 来进行转译。示例代码如下：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
--------------------- - - ---- - ---------
-
-
----- --- ------- ------ -
----------------- -
------------
-
------- -
--------------------- - - ---------
-
-
--- ----- - --- -------------
--------------这里，定义了一个 Animal 类和 Cat 类，Cat 类继承自 Animal 类。之后新建一个 Cat 实例，调用其 speak 方法，输出结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc017b5cbfe1ea0611c71