正所謂萬事開頭難，配置rollup最難的一步也正是開頭的第一步。不過沒關係。
微笑面對危險，夢想成真不會遙遠！
鼓起勇氣堅定向前，奇蹟一定會出現！
開始遊戲（初始化專案）
npm init
沒錯騷年，一路回車，你已經成功完成了本文最難以及最核心的一步——初始化了一個專案。相信你在剩餘的幾個簡單步驟中必定勢如破竹，一路到底。
建立角色&場景（初始化檔案目錄）
接下來按照這個檔案樹建立相應的場景與角色（資料夾&檔案）。是不是沒有騙你，soeasy~
build資料夾下是rollup的三元猛將。相信用過歪脖派殼（webpack）的小夥伴對這種配置檔案都比較熟悉。
大哥劉備rollup.config.js,是rollup打包的通用配置檔案，也就是說無論你想幹啥肯定是要先過大哥這一關，人家必定是大哥（三人中的核心，主要技能是控制打包流程、程式碼轉換、cmd規範的js轉換、eslint程式碼規範）。
二哥關羽rollup.config.dev.js,是rollup在開發環境的配置檔案，也就是說在平時開發的時候是一定會與關二哥打交道的，不過也不用擔心什麼，關二哥義字當先，必先幫你打平開發環境的天下。（主要技能是啟動本地服務、開啟熱過載）
三弟張飛rollup.config.prod.js,是rollup構建生產檔案的配置檔案。人送外號猛張飛，一人走上rollup生產的長阪坡。（主要是技能是混淆生產程式碼）
dist資料夾是張飛輸出的地方（生產構建後會將打包的相關資源放到這裡）
example是關羽打副本的地方（開發時，用於除錯）
src 則是劉備選擇開啟城門的入口（打包的入口）
package.json 裡邊記錄著武器庫（各種依賴&balabala）
到此，本片教程完結。
奧對，上述只是對打造rollup腳手架的幻想，畢竟想象很豐富，現實很骨感。 那麼接下來，我們就先對三元猛將進行技能加點以及武器配備。
分配武器&點技能點(安裝各種依賴&rollup外掛)
首先給隊伍中的核心，劉備大哥備rollup.config.js配發武器點選技能點
武器篇
npm i -D rollup // 核心武器，rollup基礎模組，沒安它還玩個球。
npm i -D rollup-plugin-babel // 副武器，用於轉換程式碼。
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-classes // 副武器必要鑲嵌的強化寶石 分別是babel核心、自動辨別載入相應babel模組、class轉換
npm i -D rollup-plugin-node-resolve // 輔助武器，用於識別無法識別node_modules的模組
npm i -D rollup-plugin-commonjs // 輔助武器，用於將node_modules中的cmd規範的模組轉換為es語法
npm i -D rrollup-plugin-eslint // 程式碼規範檢查外掛
// 一鍵安裝武器
npm i -D rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/plugin-transform-classes rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-eslint
複製程式碼技能加點篇 rollup.config.js
const path = require('path');
// 裝載武器
const babel = require('rollup-plugin-babel');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const {eslint} = require('rollup-plugin-eslint')
const resolveFile = function (filePath) {
return path.join(__dirname, '..', filePath)
}
//
module.exports = [
{
input: resolveFile('src/index.js'), // 打包檔案入口
output: {
file: resolveFile('dist/index.js'), // 輸出檔案
format: 'umd', // 以何種模式輸出
name: 'Demo', // umd輸出模式必填name
},
plugins: [ // 武器插槽裝載上述武器（各種外掛）
resolve(),
commonjs(),
eslint({
include: ['src/**'],
exclude: ['node_modules/**']
}),
babel({
babelrc: false,
presets: [
['@babel/preset-env', { modules: false }]
],
plugins: [
["@babel/plugin-transform-classes", {
"loose": true
}]
]
}),
],
},
]
複製程式碼TIPS之eslint，如果童鞋們需要配合IDE進行eslint程式碼檢查,那麼我們還需要安裝為此打造的武器。
// 安裝eslint
npm i -g eslint
// 然後在我們在專案的根目錄執行
eslint --init // 根據需求進行選擇，然後會生成一個.eslintrc.**的檔案，這裡邊就是eslint的配置。這樣就可以配合你的IDE進行程式碼檢查了並且rollup-plugin-eslint會自動載入這個配置檔案。更多eslint配置請檢視eslint文件奧~
複製程式碼接下來時給二哥關羽rollup.config.dev.js配備
武器篇
npm i -D rollup-plugin-serve // 用於啟動本地server
npm i -D rollup-plugin-livereload // 配合rollup-plugin-serve 監聽開發檔案自動重新整理瀏覽器，再也不用手動重新整理了~
複製程式碼技能加點篇 rollup.config.dev.js
process.env.NODE_ENV = 'development'; // 設定環境變數為開發模式
// 載入武器
const path = require('path');
const serve = require('rollup-plugin-serve');
const configList = require('./rollup.config'); // 叫上大哥一起幹仗
const livereload = require('rollup-plugin-livereload');
const resolveFile = function(filePath) {
return path.join(__dirname, '..', filePath)
}
// 與大哥劉備合體（合併rollup.config.js中的基礎配置）
configList.map((config, index) => {
config.output.sourcemap = true;
if( index === 0 ) {
config.plugins = [
...config.plugins,
...[
serve({ // 裝備serve武器並配置引數
port: 3000,
contentBase: [resolveFile('')]
}),
livereload(resolveFile('dist')) // 啟動過載，並且監聽dist目錄
]
]
}
return config;
})
module.exports = configList;
複製程式碼接下來時給三弟張飛rollup.config.prod.js配備
武器篇
npm i -D rollup-plugin-uglify // 混淆程式碼專用
// TIPS：上述武器不支援es模組打包，所以想輸出uglify的es模組需要使用下邊的武器哦~
npm i -D rollup-plugin-uglify-es
複製程式碼技能加點篇
process.env.NODE_ENV = 'production'; // 設定環境變數為生產
// 載入武器
// const { uglify } = require('rollup-plugin-uglify');
import uglify from 'rollup-plugin-uglify-es';
const configList = require('./rollup.config'); // 同樣叫上大哥劉備一起幹仗
const resolveFile = function(filePath) {
return path.join(__dirname, '..', filePath)
}
// 與大哥劉備合體（合併rollup.config.js中的基礎配置）
configList.map((config, index) => {
config.output.sourcemap = false;
config.plugins = [
...config.plugins,
...[
uglify() // 裝備uglify武器
]
]
return config;
})
module.exports = configList;
複製程式碼那麼到現在，三元大將的的武器&技能已經點好，那麼如何讓他們聽命於你，聽從指揮呢？ 你只需要對著他們說月稜鏡威力，變身！~（此次自帶BGM） 就可以啦！~
配置啟動命令讓三位寶寶聽話
找到一直不太起眼的package.json,其中有一個scripts欄位
"scripts": {
"build": "node_modules/.bin/rollup -c ./build/rollup.config.prod.js", // 構建命令，呼叫張飛 rollup -c 指定配置檔案
"dev": "node_modules/.bin/rollup -w -c ./build/rollup.config.dev.js", // 啟動生產命令，呼叫關羽 rollup -w 開啟監聽模式，檔案變化隨時知道
},
複製程式碼為什麼沒有呼叫大哥劉備的命令，因為呼叫張飛與關羽的時候他們都會叫上大哥哦。 在呼叫之前，我們先構建一個簡單的副本，要不把他們叫出來也沒什麼意義。
副本入口src/index.js
class Demo {
constructor (name) {
this.name = name
}
sayName () {
console.log(this.name)
}
}
export default Demo
複製程式碼副本demo頁面 example/index.html
<html>
<head>
</head>
<body>
<p>hello mozlee</p>
<script src="./../dist/index.js"></script>
<script>
var demo = new Demo('MozLee');
demo.sayName();
</script>
</body>
</html>
複製程式碼現在我們試試我們的命令好不好使
呼叫關羽
呼叫張飛
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self,e.Demo=n())}(this,function(){"use strict";return function(){function e(e){this.name=e}return e.prototype.sayName=function(){console.log(this.name)},e}()});
複製程式碼已經生成了混淆的程式碼，呼叫張飛成功。 至此，我們算是完成了rollup的常用配置，可以說打通了rollup的入門級副本。
最後說點什麼
文中各類武器都有更詳細的配置，需要大家自己去參看對應的文件，不在文中一一例舉。
另付其他搭建rollup參考文件