溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用roolup構(gòu)建lib

發(fā)布時間：2021-08-03 15:15:47 來源：億速云 閱讀：149 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“如何使用roolup構(gòu)建lib”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“如何使用roolup構(gòu)建lib”吧!

概述

Rollup, 和 Webpack, Parcel 都是模塊打包工具(module bundler tool), 但是側(cè)重點不同, 我們要聊的 Rollup更加適合用于構(gòu)建lib 而 Webpack, Precel 更加適合開發(fā)應(yīng)用。本文，將結(jié)合一個簡單的例子說說如何使用Rollup構(gòu)建自己的lib。

實現(xiàn)目標(biāo)

  1. 創(chuàng)建一個完整的rollup的lib工程；

  2. 區(qū)分開發(fā)和生產(chǎn)配置，方便開發(fā)測試；

  3. 引入第三方庫（如：ol）,并實現(xiàn)第三方庫的打包；

實現(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é)點下添加
"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的縮寫。(如果沒有這個參數(shù)，則直接輸出到控制臺)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同時支持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時，'umd'格式必須指定name
      //這樣，在通過<script>標(biāo)簽引入時，才能通過name訪問到export的內(nèi)容。
    },
    {
      file: './dist/my-lib-es.js',
      format: 'es'
    },
    {
      file: './dist/my-lib-cjs.js',
      format: 'cjs'
    }
  ]
}

修改配置文件package.json

// script節(jié)點下修改
"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模塊的，自己寫的時候可以盡量避免使用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ù)器啟動的文件夾，默認(rèn)是項目根目錄，需要在該文件下創(chuàng)建ind
  port: 8800 // 端口號，默認(rèn)10001
}),
livereload('dist') // watch dist目錄，當(dāng)目錄中的文件發(fā)生變化時，刷新頁面

// 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',
  // 添加了運行環(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()

到此，相信大家對“如何使用roolup構(gòu)建lib”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手