其他打包工具 Rollup Parcel

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
}

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
,  plugins:
[json()
]}

// 匯入模組成員

import
from
'./logger'
import messages from
'./messages'
import
from
'../package.json'
// 使用模組成員
const msg = messages.hi
log(msg)
log(name)
log(version)

yarn add rollup-plugin-node-resolve --dev

import json from

'rollup-plugin-json'
import resolve from
'rollup-plugin-node-resolve'
export
default
,  plugins:
[json()
,resolve()
]}

// 匯入模組成員

import _ from
'lodash-es'
//匯入lodash模組
import
from
'./logger'
import messages from
'./messages'
import
from
'../package.json'
// 使用模組成員
const msg = messages.hi
log(msg)
log(name)
log(version)
log(_.
camelcase
('hello world'
))

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
,  plugins:
[json()
,resolve()
,commonjs()
]}

module.exports =

// 匯入模組成員

import _ from
'lodash-es'
import
from
'./logger'
import messages from
'./messages'
import
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((
)=>
)export
default
}

export

default
,  output:
}

選用原則 rollup/webpack

輸出結果更扁平

自動移除未引用**

打包結果依然完全可讀

載入非esm的第三方模組比較複雜

模組最終都被打包到乙個函式中，

無法實現hmr(模組熱替換) 瀏覽器環境中，

**拆分功能依賴amd庫

如果開發框架或者乙個類庫，比較適合，大多知名框架、庫打包使用rollup

零配置的前端應用打包器

只需要了解簡單幾個命令就可以使用打包方案

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
($ =>
" />`)}
)if(module.hot)
)}

yarn parcel build src/index.html

前端工程化 其他打包工具

輸出的結果只會保留用到的部分，會自動使用tree shaking的方式打包 十分簡潔 export default rollup.config.js import json from rollup plugin json 預設匯出的是乙個函式 export default plugins json ...

vcpkg VC 打包工具

原文 引用 vcpkg 是微軟 c 團隊開發的在 windows 上執行的 c c 專案包管理工具,可以幫助您在 windows 平台上獲取 c 和 c 庫.vcpkg 自身也是使用 c 開發的 而其他的 c 包管理大多並不是 c 開發的 並且 vcpkg 能夠幫助使用者在 visual studi...

前端打包工具

前端打包工具是一種將前端 進行轉換，壓縮以及合併等操作的程式工具。目前常見的有grunt，webpack等。它能將我們前端人員寫得less,sass等編譯成css.將多個js檔案合併壓縮成乙個js檔案。它的作用就是通過將 編譯 壓縮，合併等操作，來減少 體積，減少網路請求。以及方便在伺服器上執行。目...