使用roolup構(gòu)建你的lib(實(shí)現(xiàn)步驟)
更新時(shí)間：2021年08月03日 11:01:47 作者：LZU-GIS
大家都知道Rollup更加適合用于構(gòu)建lib 而 Webpack, Precel 更加適合開發(fā)應(yīng)用。本文，將結(jié)合一個(gè)簡單的例子說說如何使用Rollup構(gòu)建自己的lib，感興趣的朋友一起看看吧
概述
Rollup, 和 Webpack, Parcel 都是模塊打包工具(module bundler tool), 但是側(cè)重點(diǎn)不同, 我們要聊的 Rollup更加適合用于構(gòu)建lib 而 Webpack, Precel 更加適合開發(fā)應(yīng)用。本文，將結(jié)合一個(gè)簡單的例子說說如何使用Rollup構(gòu)建自己的lib。
實(shí)現(xiàn)目標(biāo)
- 創(chuàng)建一個(gè)完整的rollup的lib工程；
- 區(qū)分開發(fā)和生產(chǎn)配置，方便開發(fā)測試；
- 引入第三方庫（如：
ol）,并實(shí)現(xiàn)第三方庫的打包；
實(shí)現(xiàn)步驟
一 rollup基礎(chǔ)
1. 初始化工程
cnpm init -y
2. 安裝依賴
cnpm install rollup --save-dev
3. 新建測試代碼src/main.js
const add = (a, b) => a + b;
const res = add(100 + 100)
console.log(res)
4. 編譯測試package.json
// script節(jié)點(diǎn)下添加 "dev": "rollup -i src/main.js -o dist/bundle.js -f es" // 執(zhí)行編譯命令 npm run dev
在這段指令中：
-i指定要打包的文件，-i是--input的縮寫。src/index.js是-i的參數(shù)，即打包入口文件。-o指定輸出的文件，是--output.file或--file的縮寫。(如果沒有這個(gè)參數(shù)，則直接輸出到控制臺(tái))dist/bundle.js是-o的參數(shù)，即輸出文件。-f指定打包文件的格式，-f是--format的縮寫。es是-f的參數(shù)，表示打包文件使用ES6模塊規(guī)范。
rollup支持的打包文件的格式有amd, cjs, es\esm, iife, umd。其中，amd為AMD標(biāo)準(zhǔn)，cjs為CommonJS標(biāo)準(zhǔn)，esm\es為ES模塊標(biāo)準(zhǔn)，iife為立即調(diào)用函數(shù)， umd同時(shí)支持amd、cjs和iife。
5. 配置文件
在根目錄下創(chuàng)建config/rollup.dev.config.js和config/rollup.prod.config.js
export default {
input: "./src/index.js",
output: [
{
file: './dist/my-lib-umd.js',
format: 'umd',
name: 'myLib'
//當(dāng)入口文件有export時(shí)，'umd'格式必須指定name
//這樣，在通過<script>標(biāo)簽引入時(shí)，才能通過name訪問到export的內(nèi)容。
},
{
file: './dist/my-lib-es.js',
format: 'es'
},
{
file: './dist/my-lib-cjs.js',
format: 'cjs'
}
]
}
修改配置文件package.json
// script節(jié)點(diǎn)下修改 "dev": "rollup -c config/rollup.dev.config.js", "prod": "rollup -c config/rollup.prod.config.js" // 執(zhí)行編譯命令 npm run dev npm run prod
二 rollup插件
1. rollup-plugin-babel
// 1.安裝依賴
cnpm i rollup-plugin-babel @babel/core @babel/preset-env --D
// 2.修改文件`config/rollup.prod.config.js`
import babel from 'rollup-plugin-babel'
plugins:[
babel({
exclude: 'node_modules/**'
})
]
// 3.在根目錄下創(chuàng)建文件`.babelrc`
{
"presets": [
[
"@babel/preset-env"
]
]
}
// 4.執(zhí)行編譯命令
npm run prod
2. rollup-plugin-commonjs
rollup默認(rèn)是不支持CommonJS模塊的，自己寫的時(shí)候可以盡量避免使用CommonJS模塊的語法，但有些外部庫的是cjs或者umd（由webpack打包的），所以使用這些外部庫就需要支持CommonJS模塊。
// 1、添加依賴 cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs -D // 2.修改文件`config/rollup.prod.config.js` import resolve from '@rollup/plugin-node-resolve' import commonjs from '@rollup/plugin-commonjs' plugins:[ resolve(), commonjs(), ] // 5.執(zhí)行編譯命令 npm run prod
3. rollup-plugin-postcss
// 1.安裝依賴
cnpm i postcss rollup-plugin-postcss autoprefixer@8.0.0 postcss --D
// 2.修改文件`config/rollup.config.prod.js`
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
plugins:[
postcss({
// 把 css 插入到 style 中
// inject: true,
// 把 css 放到和js同一目錄
extract: true,
plugins: [
autoprefixer()
]
})
]
// 3.創(chuàng)建測試文件`css/main.css`
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
// 4.引入文件`main.js`
import 'css/main.css'
三 開發(fā)配置
1.rollup-plugin-serve
// 1. 安裝依賴
cnpm install rollup-plugin-serve rollup-plugin-livereload -D
// 2. 修改配置文件`config/rollup.config.prod.js`
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
serve({
contentBase: '', // 服務(wù)器啟動(dòng)的文件夾，默認(rèn)是項(xiàng)目根目錄，需要在該文件下創(chuàng)建ind
port: 8800 // 端口號(hào)，默認(rèn)10001
}),
livereload('dist') // watch dist目錄，當(dāng)目錄中的文件發(fā)生變化時(shí)，刷新頁面
// 3. 修改啟動(dòng)文件`package.json`
"build:dev": "rollup -wc build/rollup.config.js --environment NODE_ENV:development"
// 4.添加測試文件 `index.html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/easymap.min.css" rel="external nofollow" >
</head>
<body>
<div id="map"></div>
<script src="dist/easymap.min.js"></script>
<script>
var map = new EasyMap()
console.log(map)
</script>
</body>
</html>
// 5. 啟動(dòng)
npm run dev
2.eslint
// 1.安裝依賴
cnpm i eslint eslint-config-mourner rollup-plugin-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -D
// 2.根目錄下添加.eslintrc.js文件
module.exports = {
extends: 'standard',
// 添加了運(yùn)行環(huán)境設(shè)定，設(shè)置 browser 為 true
env: {
browser: true
}
}
// 3.修改配置文件`config/rollup.config.prod.js`
import eslint from 'rollup-plugin-eslint';
eslint(),
// 4.添加.eslintignore
dist
src/css
4.rollup-plugin-uglify
// 1.安裝依賴
cnpm i rollup-plugin-uglify -D
// 2. 修改配置
import { uglify } from 'rollup-plugin-uglify'
// js 壓縮插件，需要在最后引入
uglify()
到此這篇關(guān)于使用roolup構(gòu)建你的lib的文章就介紹到這了,更多相關(guān)roolup構(gòu)建lib內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序開發(fā)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
詳解git submodule使用以及注意事項(xiàng)
這篇文章主要介紹了詳解git submodule使用以及注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
條件注釋只有在IE瀏覽器被支持，因此僅適用于IE的特殊指令。從IE5起都支持2012-05-05
本文主要介紹了Git Bash的使用小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
kali-linux?202202?安裝w3af命令行版的詳細(xì)過程
這篇文章主要介紹了kali-linux?202202?安裝w3af命令行版,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
MAC快速本地部署Deepseek的實(shí)現(xiàn)步驟
本文介紹了在Mac上快速本地部署Deepseek大語言模型,文中通過圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
unicode utf-8 gb18030 gb2312 gbk各種編碼對(duì)比
在修改一個(gè)cms的過程當(dāng)中遇到一個(gè)php截取字符串的函數(shù)（當(dāng)然得兼容中英字符了），因?yàn)閷?duì)各種編碼的字符范圍和字符表示不清楚，感覺一頭迷霧，雖然可以直接來調(diào)用這個(gè)函數(shù)2009-05-05
這篇文章主要介紹了Hadoop環(huán)境搭建過程中遇到的問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08
前幾天寫了個(gè)工具 CookieAdmin 來查看 IE 的 Cookie 有人問到實(shí)現(xiàn)原理，就寫了這篇文章 我不善于寫文檔或文章，所以還是代碼說話吧2009-12-12
spark通過kafka-appender指定日志輸出到kafka引發(fā)的死鎖問題
這篇文章主要介紹了spark通過kafka-appender指定日志輸出到kafka引發(fā)的死鎖，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05