在前端开发中，常常需要使用到一些新的JavaScript语法和特性，然而并不是所有的浏览器都支持这些特性。babel是一个著名的JavaScript转码器，可以将新的JavaScript代码转换成老版本浏览器支持的代码。而babel-preset-es2015-rollup是一个用于babel的预设，可以转换ES6到ES5，并为rollup打包做一些优化。
安装
安装babel-preset-es2015-rollup，需要先安装babel：
npm install --save-dev babel-core babel-preset-es2015-rollup
使用
在babel的配置文件中，需要加上babel-preset-es2015-rollup这个预设。
比如创建一个名为.babelrc的文件，内容如下：
{
"presets": [
"es2015-rollup"
]
}这里配置了一项presets，值为es2015-rollup，表示使用babel-preset-es2015-rollup这个预设。
示例代码
import sum from './sum'; console.log(sum(1, 2, 3, 4, 5)); // 15
假设我们有一个模块，使用了ES6的模块语法，引入了另一个模块sum，在浏览器上运行时会报错，因为浏览器不支持ES6的模块语法。我们可以使用babel转换这段代码。
首先，安装babel及babel-preset-es2015-rollup：
npm install --save-dev babel-core babel-preset-es2015-rollup
然后，在项目根目录下新建.babelrc文件，写入以下内容：
{
"presets": [
"es2015-rollup"
]
}最后，在终端里执行命令：
babel input.js -o output.js
其中input.js为输入文件，output.js为输出文件。
最终得到的output.js文件内容为：
-- -------------------- ---- ------- ---- -------- --- ---- - ----------------- --- ----- - ----------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - --------------- ----------------- -- -- -- ----
可以看到，ES6的import语法已经被转换成了CommonJS的require语法，而且使用了babel-preset-es2015-rollup预设，还做了一些rollup打包的优化。
结论
使用babel-preset-es2015-rollup可以将ES6代码转换成老版本浏览器也可以识别的代码，并且为rollup打包做了一些优化，可以提高应用的性能。在实际的前端项目中，应尽可能使用更高版本的JavaScript语法和特性，而babel-preset-es2015-rollup可以帮助我们实现这一目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/148655