概述
Rollup, 和 Webpack, Parcel 都是模塊打包工具(module bundler tool), 但是側重點不同, 我們要聊的 Rollup更加適合用于構建lib 而 Webpack, Precel 更加適合開發應用。本文，將結合一個簡單的例子說說如何使用Rollup構建自己的lib。
實現目標
- 創建一個完整的rollup的lib工程；
- 區分開發和生產配置，方便開發測試；
- 引入第三方庫（如：
ol）,并實現第三方庫的打包；
實現步驟
一 rollup基礎
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節點下添加
"dev": "rollup -i src/main.js -o dist/bundle.js -f es"
// 執行編譯命令
npm run dev
在這段指令中：
-i指定要打包的文件，-i是--input的縮寫。src/index.js是-i的參數，即打包入口文件。-o指定輸出的文件，是--output.file或--file的縮寫。(如果沒有這個參數，則直接輸出到控制臺)dist/bundle.js是-o的參數，即輸出文件。-f指定打包文件的格式，-f是--format的縮寫。es是-f的參數，表示打包文件使用ES6模塊規范。
rollup支持的打包文件的格式有amd, cjs, es\esm, iife, umd。其中，amd為AMD標準，cjs為CommonJS標準，esm\es為ES模塊標準，iife為立即調用函數， umd同時支持amd、cjs和iife。
5. 配置文件
在根目錄下創建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'
//當入口文件有export時，'umd'格式必須指定name
//這樣，在通過script>標簽引入時，才能通過name訪問到export的內容。
},
{
file: './dist/my-lib-es.js',
format: 'es'
},
{
file: './dist/my-lib-cjs.js',
format: 'cjs'
}
]
}
修改配置文件package.json
// script節點下修改
"dev": "rollup -c config/rollup.dev.config.js",
"prod": "rollup -c config/rollup.prod.config.js"
// 執行編譯命令
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.在根目錄下創建文件`.babelrc`
{
"presets": [
[
"@babel/preset-env"
]
]
}
// 4.執行編譯命令
npm run prod
2. rollup-plugin-commonjs
rollup默認是不支持CommonJS模塊的，自己寫的時候可以盡量避免使用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.執行編譯命令
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.創建測試文件`css/main.css`
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
// 4.引入文件`main.js`
import 'css/main.css'
三 開發配置
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: '', // 服務器啟動的文件夾，默認是項目根目錄，需要在該文件下創建ind
port: 8800 // 端口號，默認10001
}),
livereload('dist') // watch dist目錄，當目錄中的文件發生變化時，刷新頁面
// 3. 修改啟動文件`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. 啟動
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',
// 添加了運行環境設定，設置 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()
示例代碼
到此這篇關于使用roolup構建你的lib的文章就介紹到這了,更多相關roolup構建lib內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- vue-cli擴展多模塊打包的示例代碼
- php調用nginx的mod_zip模塊打包ZIP文件
- perl 模塊打包加入外部依賴程序
