其他打包工具 Rollup && Parcel

Rollup

rollup與webpack十分相似 Rollup更為小巧，只是ESM的打包器 不支援HMR(模組熱替換)這種高階特性
是為了提供ESM各種特性的高效打包器

快速上手

yarn add rollup --dev 安裝依賴 會在 node-modules 下 bin/ rollup 提供一個cli程式
執行 yarn rollup yarn rollup ./src/index.js 打包入口檔案是index.js yarn
rollup ./src/index.js --format iife 輸出的是瀏覽器支援的iife格式 yarn rollup
./src/index.js --format iife --file dist/bundle.js 輸出到dist資料夾下

配置檔案
rollup.config.js

export default {
  input: 'src/index.js', // 
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  }
}

打包命令
yarn rollup --config 啟動打包配置檔案
yarn rollup --config rollup.config.js 啟動不同配置檔名稱

使用外掛
匯入commonJS模組，或邊緣ECMAScript的新特性
外掛是Rollup唯一的擴充套件路徑
rollup-plugin-json
yarn add rollup-plugin-json --dev

import json from 'rollup-plugin-json'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json()
  ]
}

src/index.js

// 匯入模組成員
import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json'

// 使用模組成員
const msg = messages.hi

log(msg)

log(name)
log(version)

載入npm 模組
yarn add rollup-plugin-node-resolve --dev

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve()
  ]
}

src/index.js

// 匯入模組成員
import _ from 'lodash-es'   //匯入lodash模組
import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json'

// 使用模組成員
const msg = messages.hi

log(msg)

log(name)
log(version)
log(_.camelCase('hello world'))

載入CommonJS模組
yarn add rollup-plugin-commonjs --dev

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}

cjs-module.js

module.exports = {
  foo: 'bar'
}

index.js

// 匯入模組成員
import _ from 'lodash-es'
import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json'
import cjs from './cjs-module'

// 使用模組成員
const msg = messages.hi

log(msg)

log(name)
log(version)
log(_.camelCase('hello world'))
log(cjs)

程式碼拆分
yarn rollup --config --format amd

import('./logger').then(({ log }) => {
  log('code splitting~')
})


export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'
    dir: 'dist',
    format: 'amd'
  }
}

多入口打包

export default {
  // input: ['src/index.js', 'src/album.js'],
  input: {
    foo: 'src/index.js',
    bar: 'src/album.js'
  },
  output: {
    dir: 'dist',
    format: 'amd'
  }
}

yarn rollup --config

選用原則 Rollup/Webpack

輸出結果更扁平
自動移除未引用程式碼
打包結果依然完全可讀

缺點

載入非ESM的第三方模組比較複雜
模組最終都被打包到一個函式中，
無法實現HMR(模組熱替換) 瀏覽器環境中，
程式碼拆分功能依賴AMD庫

如果不適合大量引用第三方庫，引用html，分包
如果開發框架或者一個類庫，比較適合，大多知名框架、庫打包使用rollup

Parcel

零配置的前端應用打包器

只需要瞭解簡單幾個命令就可以使用打包方案
yarn init
yarn add parcel-bundler --dev
yarn pracel src/index.html 開啟一個開發伺服器，並開始執行打包

模組熱替換
自動安裝依賴
直接匯入寫，儲存檔案後自動安裝 支援動態匯入

// import $ from 'jquery'
import foo from './foo'
import './style.css'
import logo from './zce.png'

foo.bar()

import('jquery').then($ => {
  $(document.body).append('<h1>Hello Parcel</h1>')

  $(document.body).append(`<img src="${logo}" />`)
})

if (module.hot) {
  module.hot.accept(() => {
    console.log('hmr')
  })
}

生產模式打包

yarn parcel build src/index.html