5分鐘打通rollup.js副本

正所謂萬事開頭難，配置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>
複製代碼

如今咱們試試咱們的命令好很差使

調用關羽

打開http://localhost:3000的控制檯。發現了控制檯輸出了MozLee。成功調用關羽。 那麼關羽其餘的技能你們能夠本身試試奧。（熱重載）

調用張飛

打包成功，看一下輸出文件dist/index.js 以下。

!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參考文檔

• rollupjs中文官方文檔
• Rollup.js 實戰學習筆記