如何使用Rollup開發一個npm包並釋出

2024-05-09碼農

沖~

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。

背景

前幾天老大說現在團隊中很多冗余程式碼，而其中一部份就表現在，很多計畫都重復寫了一些一模一樣的工具函式，比如：

公司內部加密函式

公司內部的許可權校驗函式

公司內部的單點登入封裝函式

等等。。。。

其實這些函式在每一個計畫中都是一模一樣的，沒必要每一個計畫都寫一遍，這種做法有很多壞處

程式碼冗余

不好維護，函式一改，就所有計畫都需要一起改

由於我們公司計畫不是采用 Monorepo 的方式去管理的，所以現階段比較好的辦法就是寫一個工具庫包，釋出到私有 npm 倉庫上，然後在每一個計畫中去安裝使用即可~ 這樣好處有

減少了每個計畫中的程式碼冗余

好維護，邏輯只需要改一處，然後改版本號重新發包即可

類比

在日常的開發中，我們會使用到很多很多的包，比如我們想要使用 lodash 只需要在終端裏輸入

npm i lodash -D

然後我們就會在 node_modules 中看到這個包，並且可以去使用它~

import { cloneDeep } from'lodash' const obj1 = {}; const obj2 = cloneDeep(obj1)

這些包長啥樣？

我們開啟 node_modules 中的 lodash 發現，裏面其實都是打包後的產物，也就是開發 lodash 的開發者，編寫一些例如 ts、ES6 語法的程式碼後，進行 打包後 釋出到 npm 上，我們才可以透過 npm i lodash 去安裝它~

那為啥要 打包後 才釋出到 npm 上呢？這是因為

需要把 ts、ES6 這些比較新語法轉換成 ES5 的舊語法

需要對程式碼進行壓縮後再釋出，這樣體積會比較小一些

Webpack or Rollup？

大部份的前端開發者接觸到的打包工具都是 Webpack ，而很少接觸到 Rollup ，我可以給大家簡單講講這兩者有什麽區別~

Webpack

Webpack 主要用於構建復雜的前端計畫。他能做以下這些事情：

支持將多種資源（如JavaScript、CSS、圖片等）視為模組，並透過模組依賴關系進行打包

提供了豐富的外掛程式和載入器，能夠處理各種復雜的場景，如代分碼割、懶載入、熱模組替換等

它還支持開發環境和生產環境的不同配置，使得計畫開發和部署更加方便

由於 Webpack 的靈活性和豐富的功能，它適用於大型、復雜的計畫，特別是那些包含大量模組和資源、有復雜構建需求的計畫

Rollup

Rollup 是一個面向現代JavaScript套用的模組打包工具，專註於建立用於庫和類似庫的打包。具備以下這些特點：

采用ES模組作為標準，可以按需引入和打包程式碼，並且能夠進行 Tree Shaking ，去除未使用的程式碼，減小輸出檔大小

相對於 Webpack ， Rollup 更加輕量級和簡單，它不提供像Webpack那樣豐富的外掛程式和載入器生態系，但它的輸出更精簡

小結

Webpack 適合用在計畫中

Rollup 適用於開發一些工具庫、元件庫

所以我們開發工具庫是推薦使用 Rollup 來開發

開發自己的工具庫

初始計畫

首先新建一個 npm-sx-test 的資料夾，用來開發我們的工具庫

名字可以自己定~

然後進入到 npm-sx-test 中，執行

npm init

初始化一個 npm 的環境~

{ name: 'npm-sx-test', // 包名 main: 'index.js', // 包被引入時的入口檔 type: "module", // 程式碼可以使用 ES6 模組化 version: 1.0.0, // 版本 description: '', // 描述 author: 'zh', // 作者 contributors: '', // 其他貢獻者 dependencies: {}, // 生產依賴 devDependencies: {}, // 開發依賴 repository：'', // 源碼地址 keywords: [], // 包搜尋鍵碼 }

接著在根目錄下，建立一個入口檔 index.js 以及一個 utils 資料夾

index.js 用來統一匯出所有工具函式

utils 用來存放各種工具函式

// permission.js exportconst checkPermission = (role) => { // coding... return role } // crypto.js exportconst crypto = (password) => { // coding... return password } // sso.js exportconst sso = (username) => { // coding... return username } // index.js import { crypto } from'./utils/crypto' import { checkPermission } from'./utils/permission' import { sso } from'./utils/sso' exportdefault { crypto, checkPermission, sso }

配置 Rollup & Babel 打包環境

程式碼寫完後，我們需要將他們打包，還記得我們上面說了為啥要打包後再釋出？

1、需要把 ts、ES6 這些比較新語法轉換成 ES5 的舊語法

2、需要對程式碼進行壓縮後再釋出，這樣體積會比較小一些

我們需要先安裝這些必要的外掛程式

npm i @babel/preset-env @rollup/plugin-babel rollup

接著建立一個 rollup.config.js 用來存放 Rollup 打包的配置

// rollup.config.js import babel from'@rollup/plugin-babel'; exportdefault { input: 'index.js', // 入口檔 output: [ { file: './es/index.js', format: 'esm', // 將軟體包保存為 ES 模組檔 name: 'cssModuleVue' }, { file: './dist/index.js', format: 'cjs', // CommonJS，適用於 Node 和 Browserify/Webpack name: 'cssModuleVue', exports: 'default' } ], watch: { // 配置監聽處理 exclude: 'node_modules/**' }, plugins: [ // 使用外掛程式 @rollup/plugin-babel babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }) ] };