5分鐘打通rollup.js副本

瞅啥那發表於2019-07-02
JS

正所謂萬事開頭難，配置rollup最難的一步也正是開頭的第一步。不過沒關係。

微笑面對危險，夢想成真不會遙遠！

鼓起勇氣堅定向前，奇蹟一定會出現！

image

開始遊戲（初始化專案）

npm init

沒錯騷年，一路回車，你已經成功完成了本文最難以及最核心的一步——初始化了一個專案。相信你在剩餘的幾個簡單步驟中必定勢如破竹，一路到底。

建立角色&場景（初始化檔案目錄）

image

接下來按照這個檔案樹建立相應的場景與角色（資料夾&檔案）。是不是沒有騙你，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）

到此，本片教程完結。

image

奧對，上述只是對打造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>
複製程式碼

現在我們試試我們的命令好不好使

呼叫關羽

image
開啟http://localhost:3000的控制檯。發現了控制檯輸出了MozLee。成功呼叫關羽。 那麼關羽其他的技能大家可以自己試試奧。（熱過載）

呼叫張飛

image
打包成功，看一下輸出檔案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參考文件

相關文章