随着前端工具的不断更新，现在不少工具已经能支持 ES6 及以上的新特性，但是部分浏览器并不支持这些新特性，这时候就需要使用 Babel 这样的工具将代码转换成 ES5 语法，以便同时兼顾浏览器的兼容性和代码的最新特性。
在使用 Babel 进行转码时，我们可以使用 babel-preset-es2015 这个预设来转换 ES6 代码，它支持了大部分的 ES6 特性。但是，如果你想要使用 ES6 中的模块化功能，你可能需要额外安装 babel-preset-es2015-modules-commonjs 这个模块来支持模块化。
但是，如果你的项目使用了 webpack 或者 rollup 这样的打包工具，你则完全不需要这个转换，因为这些打包工具都已经支持了 ES6 模块化了。
而如果你在使用 babel-preset-es2015 转换时觉得它支持的特性不够全面，你完全可以使用更加强大的 babel-preset-env 预设，它支持更广泛的语言特性和一些浏览器支持的特性。
使用 babel-preset-es2015-mod
babel-preset-es2015-mod 是在 babel-preset-es2015 和 babel-preset-env 的基础上进一步扩展了支持语言特性，它已经默认包含了 babel-preset-es2015-modules-commonjs 的支持，所以你无需额外安装这个模块了。
安装
首先，你需要使用 npm 或者 yarn 安装 babel-preset-es2015-mod：
npm install babel-preset-es2015-mod --save-dev # 或者 yarn add babel-preset-es2015-mod -D
配置
在使用 babel 进行代码转换时，需要添加一个 babel 配置文件 .babelrc 或者在 package.json 中添加 babel 字段。下面是基本的 babel 配置示例：
{
"presets": [
"es2015-mod"
]
}上面的配置中，我们仅指定了 es2015-mod 这个预设进行转码，你可以在这个配置中添加其他预设或者插件来进行更多的转码支持。
示例代码
-- -------------------- ---- -------
-- --- ----
----- --- - --- -- ---
----- ---- - ----------- -- --- - ---
-- --- ------
------ - --- - ---- ------
-- --- ----
----- ------ -
----------------- -
--------- - -----
-
------- -
------------------------- ----- - ---------
-
-
-- -- ------- --
----- ----- - -- -- --- --------------- -- ------------------- -----
----- --- - ----- -- -- -
------------------ -------------
----- ------------
----------------- -------------
--
-- --- ----------
----- - ----- ---- ------- - - - ----- ------ ---- --- ------- ------ --上面的代码使用了 ES6 的大部分特性，当然它们也都可以使用 babel-preset-es2015 进行转码。如果你在转码时需要支持更加新的语言特性，那么你可以使用 babel-preset-env 来进行更进一步的支持。
总结
babel-preset-es2015-mod 在 babel-preset-es2015 和 babel-preset-env 的基础上进一步扩展了支持语言特性，当你需要更完备的语言特性支持时可以考虑使用它。同时，对于目前更多的前端项目，使用比较新的打包工具已经能够不需要使用 babel-preset-es2015-mod 这样的预设了，因为这些打包工具已经支持了更加新的语言特性，大家可以根据自己的项目进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/100605