###使用插件
---
到目前為止,我們已經從一個入口點和通過相對路徑導入的模塊創建了一個簡單的bundle。當您需要構建更為復雜的bundle時,您通常需要更多的靈活性 - 例如導入使用npm來安裝的模塊、使用Babel編譯代碼、使用JSON文件等等。
針對以上原因,我們使用了 *插件*,它可以在打包過程的關鍵點改變Rollup的行為。在[the Rollup wiki](https://github.com/rollup/rollup/wiki/Plugins)上維護了可用插件的列表。
### 使用插件
在本教程中,我們將使用[rollup-plugin-json](https://github.com/rollup/rollup-plugin-json)作為例子,它允許Rollup從JSON文件導入數據。
首先安裝rollup-plugin-json作為開發依賴:
```bash
npm install --save-dev rollup-plugin-json
```
(我們使用`--save-dev`而不是`--save`,因為我們的代碼實際上在運行時不依賴于插件, - 只有當我們構建打包時才會使用到。)
然后更新您的`src/main.js`文件,以便它從您的package.json導入而不是從`src/foo.js`導入:
```js
// src/main.js
import { version } from '../package.json';
export default function () {
console.log('version ' + version);
}
```
其次編輯您的`rollup.config.js`文件以包含JSON插件:
```js
// rollup.config.js
import json from 'rollup-plugin-json';
export default {
entry: 'src/main.js',
format: 'cjs',
plugins: [ json() ],
dest: 'bundle.js'
};
```
最后通過命令`npm run build`來運行Rollup。結果應該是這樣子的:
```js
'use strict';
var version = "1.0.0";
var main = function () {
console.log('version ' + version);
};
module.exports = main;
```
(請注意,只有我們實際需要的數據才會被導入 - `name`和`devDependencies`以及package.json的其他部分是被忽略的。哪是因為[tree-shaking](#what-is-tree-shaking-)在起作用!)
***
> 原文:https://rollupjs.org/#getting-started-with-plugins