開始今天的主題前，我們先補充一下 有關intro和outro的打包配置

7. intro和outro配置
   intro和outro屬性與我們之前講解的banner和footer屬性類似，都是用來為程式碼添加註釋。那麼這四個屬性之間有什麼區別呢？首先了解一下rollup.js官網對這四個屬性的解釋：

• intro：在打包好的檔案的塊的內部(wrapper內部)的最頂部插入一段內容
• outro：在打包好的檔案的塊的內部(wrapper內部)的最底部插入一段內容
• banner：在打包好的檔案的塊的外部(wrapper外部)的最頂部插入一段內容
• footer：在打包好的檔案的塊的外部(wrapper外部)的最底部插入一段內容
  也就是說intro和outro新增的註釋在程式碼塊的內部，banner和footer在外部

今天我們就接著下去介紹rollup的常用外掛

8. @rollup/plugin-commonjs外掛

rollup.js預設不支援CommonJS模組，我們需要藉助commonjs外掛來解決這個問題。

下載方式
npm install @rollup/plugin-commonjs --save-dev

import {resolve} from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

export default {
  input: './src/plugin/main-cjs.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs()
  ]
}

9. rollup-plugin-babel 外掛

雖然rollup本身就會對代碼做一個基本的轉譯，但是有一些機制，像是箭頭函式 或 promise 必需要BABEL才能轉譯的。

下載方式
npm i -D @rollup/plugin-babel

import {resolve} from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'

export default {
  input: './src/plugin/main-es.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs(),
    babel()
  ]
}

10. rollup-plugin-json 外掛

支援json模組

下載方式
npm i -D @rollup/plugin-json

import json from '@rollup/plugin-json'

export default {
  input: './src/plugin/main-json.js',
  output: [{
    file: './dist/index-plugin-cjs.js',
    format: 'cjs'
  }, {
    file: './dist/index-plugin-es.js',
    format: 'es'
  }],
  plugins: [
    resolve(),
    commonjs(),
    babel(),
    json()
  ]
}

11. rollup-plugin-uglify 外掛

程式碼壓縮（不支援ES模組）所以可用terser取代

下載方式
npm i -D rollup-plugin-uglify

其他工具:

12. @rollup/plugin-typescript 外掛

使用typescript的朋友可以引入此外掛
使用此外掛要先安裝tslib typescript，安裝方式npm install tslib typescript --save-dev

下載方式
npm i -D npm install @rollup/plugin-typescript --save-dev

配置方式

import typescript from "rollup-plugin-typescript";
import sourceMaps from "rollup-plugin-sourcemaps";

export default {
  input: "./src/main.ts",
  plugins: [
    typescript({
      exclude: "node_modules/**",
      typescript: require("typescript")
    }),
    sourceMaps()
  ],
  output: [
    {
      format: "cjs",
      file: "lib/bundle.cjs.js",
      sourcemap: true
    },
    {
      format: "es",
      file: "lib/bundle.esm.js",
      sourcemap: true
    }
  ]
};

13. rollup-plugin-eslint: 提供 ESLint 能力, 需要安装和配置 ESLint

下載方式:
npm install rollup-plugin-eslint --save-dev

14. rollup-plugin-serve: 類似 webpack-dev-server, 提供靜態服務器能力

npm install rollup-plugin-serve --save-dev

plugins: [
    ...baseConfig.plugins,
    serve({
      port: 8080,
      contentBase: ['']
    })
  ]

總結

今天把所有常見的rollup外掛介紹完了，明天會開始時做我們的第一個Javascript開源庫。

參考資料

• rollup官網 (https://rollupjs.org/)
• 10分鐘快速入門rollup.js(https://www.itread01.com/qexxq.html)
• 10分鐘快速進階rollup.js(https://www.itread01.com/qqhkpf.html)
• Rollup打包工具的使用（超詳細，超基礎，附代碼截圖超簡單）rollup（下一代ES模塊捆綁器）(https://juejin.im/post/6844904058394771470)