本篇內容主要講解“如何使用roolup構建lib”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用roolup構建lib”吧!
Rollup, 和 Webpack, Parcel 都是模塊打包工具(module bundler tool), 但是側重點不同, 我們要聊的 Rollup更加適合用于構建lib 而 Webpack, Precel 更加適合開發應用。本文，將結合一個簡單的例子說說如何使用Rollup構建自己的lib。
創建一個完整的rollup的lib工程；
區分開發和生產配置，方便開發測試；
引入第三方庫（如：ol）,并實現第三方庫的打包；
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
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 prod2. 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 dev2.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/css4.rollup-plugin-uglify
// 1.安裝依賴
cnpm i rollup-plugin-uglify -D
// 2. 修改配置
import { uglify } from 'rollup-plugin-uglify'
// js 壓縮插件，需要在最后引入
uglify()到此，相信大家對“如何使用roolup構建lib”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
