概述
Rollup, 和 Webpack, Parcel 都是模塊打包工具(module bundler tool), 但是側(cè)重點(diǎn)不同, 我們要聊的 Rollup更加適合用于構(gòu)建lib 而 Webpack, Precel 更加適合開發(fā)應(yīng)用。本文，將結(jié)合一個(gè)簡(jiǎn)單的例子說說如何使用Rollup構(gòu)建自己的lib。
實(shí)現(xiàn)目標(biāo)
- 創(chuàng)建一個(gè)完整的rollup的lib工程；
- 區(qū)分開發(fā)和生產(chǎn)配置，方便開發(fā)測(cè)試；
- 引入第三方庫(kù)（如：
ol）,并實(shí)現(xiàn)第三方庫(kù)的打包；
實(shí)現(xiàn)步驟
一 rollup基礎(chǔ)
1. 初始化工程
cnpm init -y
2. 安裝依賴
cnpm install rollup --save-dev
3. 新建測(cè)試代碼src/main.js
const add = (a, b) => a + b;
const res = add(100 + 100)
console.log(res)
4. 編譯測(cè)試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模塊的語(yǔ)法，但有些外部庫(kù)的是cjs或者umd（由webpack打包的），所以使用這些外部庫(kù)就需要支持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)建測(cè)試文件`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í)，刷新頁(yè)面
// 3. 修改啟動(dòng)文件`package.json`
"build:dev": "rollup -wc build/rollup.config.js --environment NODE_ENV:development"
// 4.添加測(cè)試文件 `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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- vue-cli擴(kuò)展多模塊打包的示例代碼
- php調(diào)用nginx的mod_zip模塊打包ZIP文件
- perl 模塊打包加入外部依賴程序
