### 使用 Rollup 和 Babel
---
許多開發者在他們的項目中使用 [Babel](https://babeljs.io/)，因此他們可以用上那些未被瀏覽器和 Node.js 支持的未來的 JavaScript 特性。
最容易的辦法去同時使用 Babel 和 Rollup 是使用 [rollup-plugin-babel](https://github.com/rollup/rollup-plugin-babel). 安裝它:
```bash
npm i -D rollup-plugin-babel
```
將它添加到 `rollup.config.js` 里面:
```js
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
export default {
entry: 'src/main.js',
format: 'cjs',
plugins: [
resolve(),
babel({
exclude: 'node_modules/**' // 僅僅轉譯我們的源碼
})
],
dest: 'bundle.js'
};
```
在 Babel 將編譯你的代碼前，它需要被配置。新建一個文件 `src/.babelrc`：
```js
{
"presets": [
["latest", {
"es2015": {
"modules": false
}
}]
],
"plugins": ["external-helpers"]
}
```
這里有幾個關于配置的與不常不同的事情。首先我們設置 `"modules": false`，否則 Babel 會在 Rollup 有機會做處理之前，將我們的模塊轉成 CommonJS，導致 Rollup 的一些處理失敗。
第二，我們使用 `external-helpers` 插件，它允許 Rollup 在文件束前僅引用一次任何的 'helpers' 函數，而不是在每個使用這些 'helpers' 的模塊里都引入一遍（一般是默認行為）。
第三，我們將 `.babelrc` 文件放到 `src` 目錄下，而非項目根目錄。這允許我們可以有另一個 `.babelrc` 文件給一些別的操作，像測試，如果我們真的在后面需要的話 - 通常給不同的任務做不同的配置會更好。
現在，我們運行 rollup 前，我們需要安裝 `latest` preset 和 `extternal-helpers` 插件：
```bash
npm i -D babel-preset-latest babel-plugin-external-helpers
```
現在運行 Rollup 會創建一個文件束...除了我們并沒有使用任何 ES2015 的特性。讓我們改一下，編輯 `src/main.js`:
```js
// src/main.js
import answer from 'the-answer';
export default () => {
console.log(`the answer is ${answer}`);
}
```
使用 `npm run build` 運行 Rollup, 同時檢查一下文件束：
```js
'use strict';
var index = 42;
var main = (function () {
console.log('the answer is ' + index);
});
module.exports = main;
```
***
> 原文：https://rollupjs.org/#using-rollup-with-babel
