一、前置知識
沒接觸過前端模塊化概念的同學(xué)可先參考：JS & Node 模塊化解釋：AMD、UMD、CommonJS、 ESM
二、什么是 Rollup ？
Rollup 工具可以將代碼轉(zhuǎn)成不同模塊，實現(xiàn)一套代碼多端（瀏覽器/Node）引入。比如通過一句命令將代碼打包為：
- 瀏覽器（代碼通過 Script 標(biāo)簽引入）
rollup main.js --file bundle.js --format iife
- AMD（兼容 requirejs.js 框架）
rollup main.js --file bundle.js --format amd
- CommonJS（Node.js 代碼通過 CJS 方式引入）
rollup main.js --file bundle.js --format cjs
- UMD （瀏覽器、AMD、CJS 均支持，是目前最常見的模塊選擇方式）
rollup main.js --file bundle.js --format umd --name "myBundle"
后面會提到每個命令的作用，這里了解即可。
三、Rollup 的應(yīng)用場景和好處
-
如果你的項目是以插件或庫給用戶引入使用，Rollup 是最佳選擇，它可以將代碼轉(zhuǎn)成不同的模塊，然后用戶根據(jù)自身項目模塊語法來引入你的代碼。
-
Rollup 支持 Tree-shaking ，只打包引用代碼，無引用的一律甩掉。
-
你的項目可以肆無忌憚地使用 ESM 寫法，Rollup 將會自動編譯，再結(jié)合 Babel 美滋滋。
四、Rollup 與 Webpack/Vite 的區(qū)別
-
Rollup將 JS 代碼轉(zhuǎn)成不同的引入模塊形式，如果要處理其它語言需要借助插件。 -
Webpack將 JS 代碼進行打包壓縮，同時擁有著 CSS/JS/HTML/Font 等其它語言插件的生態(tài)豐富圈。 -
組件庫或插件適合用 Rollup 打包、大型項目適合用 Webpack 或 Vite 。
五、Rollup 與 Babel 的區(qū)別
-
Rollup可將 JS 代碼變成多種模塊來引入運行。 -
Babel可將高級 JS 語法代碼轉(zhuǎn)成低級版本兼容運行。
六、Rollup 使用教程
6.1 準(zhǔn)備工作
-
新建項目：
rollup-example -
項目結(jié)構(gòu)：
-
src/main.js代碼：const user = () => { return { name: 'Jack' } } export { user }; -
全局安裝 Rollup：
npm install rollup -g
6.2 使用命令行
6.2.1 使用 CLI 打包
rollup ./src/main.js --file lib.js --format cjs
解釋：
-
./src/main.js是目標(biāo)即入口文件。 -
--file lib.js是輸出的產(chǎn)物文件名。 -
--format cjs是需要轉(zhuǎn)換的模塊格式，這里我們采用CJS，表示只用于 Node.js
打包后的產(chǎn)物：
6.2.2 參數(shù)命令說明
-o === --file === output 輸出產(chǎn)物的文件名。-d === --dir === 輸出產(chǎn)物的目錄名，一般在開啟 code spliting 代碼分割技術(shù)后才用到。-f === --format === 打包模塊格式。-w === --watch === 啟動監(jiān)聽模式，當(dāng)項目代碼有變動時，自動執(zhí)行打包命令。-c === --config === rollup.config.js 指向配置文件。
其它參數(shù)命令可參考官方文檔。
6.3 使用配置文件
當(dāng)頻繁使用打包命令且參數(shù)量越來越多時，Rollup 支持配置文件的方式，例如：
// rollup.config.js
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
export default {
input: 'src/main.js', // 目標(biāo)入口
// 同一個目標(biāo)入口可以編譯多種產(chǎn)物形式。
output: [
{
file: 'bundle.js', // 產(chǎn)物文件名。
format: 'cjs', // 產(chǎn)物模塊格式。
},
{
file: 'bundle.min.js',
format: 'iife',
// output-plugin（構(gòu)建完成后的插件）：
// 做一些收尾工作，比如 terser 插件可將代碼變量/函數(shù)名全部壓縮轉(zhuǎn)義為 a,b,c,d 的精簡版本形式，俗稱“混淆”，防止外部人員窺探源碼。
plugins: [terser()]
}
],
// compliling-plulgin（rollup 執(zhí)行編譯時的插件）:
// 幫助我們在寫代碼的過程中享受一些特殊語法糖和特殊處理。
plugins: [
// 支持識別 import json 數(shù)據(jù)。
json(),
// 支持 Babel （記得要在 babel.config.js 中配置下 preset ）
resolve(),
babel({ babelHelpers: 'bundled' })
],
// 告訴哪個 NPM 模塊打包過程種直接全量 import，不采用 tree-shaking 。
external: ['lodash']
};
最后執(zhí)行 rollup -c 即可，更多配置選項可參考官方文檔 。
提示：命令行參數(shù)的優(yōu)先級比配置選項更高。
七、Rollup 支持打包 Vue 模板 或 Vue TSX
構(gòu)建一個組件庫時，通常需要借助框架來快速完成，比如我想構(gòu)建一套 Vue 語法的組件庫，能夠給其它 Vue 項目引入使用。接下來我將以 Vue3 的兩種寫法來作為演示。
7.1 準(zhǔn)備工作
-
新建
rollup-vue-example項目并使用npm init -y初始化。 -
項目結(jié)構(gòu)如下：
-
為了使項目全面支持 ESM 模塊語法，在
package.json中新增："type": "module"，以便本地運行項目時 node 不會報錯。 -
main.js入口代碼如下：import Vue from 'vue'; import App from './src/App.vue'; new Vue({ render: (h) => h(App), }).$mount('#app'); -
src/App.vue代碼如下<template> <div>Hello,world</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ setup(props) { return {} } }) </script> <style lang="scss" scoped> </style> -
rollup.config.js配置文件如下：export default { input: 'main.js', output: { file: 'dist/index.js', format: 'esm', }, plugins: [], };
7.2 打包 Vue 模板
要想讓 Rollup 識別 .vue 文件，得分幾個步驟完成：
7.2.1 安裝以下兩個插件：
npm i rollup-plugin-vue @vue/compiler-sfc
其中 rollup-plugin-vue 是我們想要的插件，@vue/compiler-sfc 是 rollup-plugin-vue 需要的依賴（后面會講它的用處）。
7.2.2 調(diào)整 rollup.config.js 配置：
import vue from 'rollup-plugin-vue';
export default {
input: 'main.js',
output: {
file: 'dist/index.js',
format: 'esm',
},
plugins: [
vue({
css: true, // 提取 css 為單個文件。
compileTemplate: true, // 編譯 vue 模板。
})
],
};
7.2.3 執(zhí)行：
rollup -c
編譯后的 dist/index.js 產(chǎn)物如下：
你可能會問，為什么 .vue 源碼會被編譯，而不像 js 代碼那樣原封不動的輸出？
這是因為 .vue 語法本身就不能直接在瀏覽器或 node 上面跑，于是剛剛的 @vue/compiler-sfc 依賴就排上用場了，它可以識別 .vue 文件并編譯成可執(zhí)行的 JS 對象代碼。
不信可以在產(chǎn)物里找找看哪個不是 JS 能識別的，若能找到；我請你喝可口可樂。
你可能還會問，那為啥本地項目就能跑起 vue 模板的代碼呢？這是因為編譯期間，如 vue-cli or vite 偷偷將它們轉(zhuǎn)為可執(zhí)行的 JS 腳本，只是我們沒感知到而已~
7.3 打包 Vue JSX
Vue3 除了語法上發(fā)生了變化，它還支持 JSX 寫法，我們又不得不繼續(xù)卷到底！
與 Vue 模板相比，Rollup 支持 Vue JSX 需要多點配置量，但問題不大。
7.3.1 準(zhǔn)備工作
我們繼續(xù)沿用剛剛的 rollup-vue-example 項目來作為演示，這里稍微改動下即可：
- 新增
src/App.tsx文件，內(nèi)容如下：
import { defineComponent } from 'vue';
const App = defineComponent({
setup() {
const Greet = () => <div>Hello,world</div>
return <Greet />
}
});
export default App
- 改變
main.引入文件方式：
import Vue from 'vue';
import App from './src/App.tsx'; // 引入 tsx 。
new Vue({
render: (h) => h(App),
}).$mount('#app');
7.3.2 安裝依賴包：
npm i @rollup/plugin-babel @babel/core @vue/babel-preset-jsx
解釋：
-
@rollup/plugin-babel能夠讓 Rollup 支持Babel。 -
@babel/core引入babel的核心編譯包。 -
@vue/babel-preset-jsxVue 自家實現(xiàn)的Vue JSXbabel 插件 。
對 Babel 概念不熟的可以閱讀前面寫過的 JS & 介紹 Babel 的使用及 presets & plugins 的概念
。
7.3.2 調(diào)整 rollup.config.js 配置：
import vue from 'rollup-plugin-vue';
// 新增
import { babel } from '@rollup/plugin-babel';
export default {
input: 'main.js',
output: {
file: 'dist/index.js',
format: 'esm',
},
plugins: [
vue({
css: true, // 提取 css 為單個文件。
compileTemplate: true, // 編譯 vue 目標(biāo)。
}),
// 新增
babel({
extensions: ['.js', '.jsx', '.ts', '.tsx'],
presets: ['@vue/babel-preset-jsx'], // 讓 babel 加載 Vue JSX babel 插件。
})
],
};
7.3.3 執(zhí)行：
roolup -c
編譯后的 dist/index.js 產(chǎn)物如下：
你可能會問，.tsx 采用的就是 JS 語法呀，產(chǎn)物為什么也會發(fā)生變化呢？
錯?。?！TSX 不是 JS，它們是 JS + HTML 的混合體，看看里面的標(biāo)簽便知，瀏覽器是無法執(zhí)行這段代碼的，依然需要轉(zhuǎn)成可執(zhí)行的JS 對象。
八、Rollup 常用插件集合
========compiling plugin=========
@rollup/plugin-commonjs 支持在 ESM 中引入 CJS代碼。
@rollup/plugin-typescript 支持識別 .ts 文件。
@rollup/plugin-json 能夠?qū)?import .json 文件。
@rollup/plugin-babel 支持 Babel
@rollup/plugin-node-resolve 提供更全面的路徑解析
========output plugin=========
@rollup/plugin-terser 將代碼變量混淆，轉(zhuǎn)成 a,b,c,d, …的形式。
查看更多插件
----------------------------------------------------------------結(jié)尾----------------------------------------------------------------文章來源：http://www.zghlxwxcb.cn/news/detail-571700.html
參考文獻：
https://rollup-plugin-vue.vuejs.org/#what-does-rollup-plugin-vue-do
https://rollupjs.org/introduction/
https://rollupjs.org/tutorial/
https://adostes.medium.com/authoring-a-javascript-library-that-works-everywhere-using-rollup-f1b4b527b2a9文章來源地址http://www.zghlxwxcb.cn/news/detail-571700.html
到了這里，關(guān)于Rollup & 的作用、使用教程、支持 Vue、以及與 Webpack / Babel 的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
