背景

前幾天老大說(shuō)現(xiàn)在團(tuán)隊(duì)中很多冗余代碼，而其中一部分就表現(xiàn)在，很多項(xiàng)目都重復(fù)寫了一些一模一樣的工具函數(shù)，比如：eKZ28資訊網(wǎng)——每日最新資訊28at.com

• 公司內(nèi)部加密函數(shù)
• 公司內(nèi)部的權(quán)限校驗(yàn)函數(shù)
• 公司內(nèi)部的單點(diǎn)登錄封裝函數(shù)
• 等等。。。。

其實(shí)這些函數(shù)在每一個(gè)項(xiàng)目中都是一模一樣的，沒(méi)必要每一個(gè)項(xiàng)目都寫一遍，這種做法有很多壞處eKZ28資訊網(wǎng)——每日最新資訊28at.com

• 代碼冗余
• 不好維護(hù)，函數(shù)一改，就所有項(xiàng)目都需要一起改

由于我們公司項(xiàng)目不是采用 Monorepo 的方式去管理的，所以現(xiàn)階段比較好的辦法就是寫一個(gè)工具庫(kù)包，發(fā)布到私有 npm 倉(cāng)庫(kù)上，然后在每一個(gè)項(xiàng)目中去安裝使用即可~ 這樣好處有eKZ28資訊網(wǎng)——每日最新資訊28at.com

• 減少了每個(gè)項(xiàng)目中的代碼冗余
• 好維護(hù)，邏輯只需要改一處，然后改版本號(hào)重新發(fā)包即可

類比

在日常的開發(fā)中，我們會(huì)使用到很多很多的包，比如我們想要使用 lodash 只需要在終端里輸入eKZ28資訊網(wǎng)——每日最新資訊28at.com

npm i lodash -D

然后我們就會(huì)在 node_modules中看到這個(gè)包，并且可以去使用它~eKZ28資訊網(wǎng)——每日最新資訊28at.com

圖片eKZ28資訊網(wǎng)——每日最新資訊28at.com

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

這些包長(zhǎng)啥樣？

我們打開 node_modules 中的 lodash 發(fā)現(xiàn)，里面其實(shí)都是打包后的產(chǎn)物，也就是開發(fā) lodash 的開發(fā)者，編寫一些例如 ts、ES6 語(yǔ)法的代碼后，進(jìn)行 打包后 發(fā)布到 npm 上，我們才可以通過(guò) npm i lodash 去安裝它~eKZ28資訊網(wǎng)——每日最新資訊28at.com

圖片eKZ28資訊網(wǎng)——每日最新資訊28at.com

那為啥要 打包后 才發(fā)布到 npm 上呢？這是因?yàn)?span style="display:none">eKZ28資訊網(wǎng)——每日最新資訊28at.com

• 需要把 ts、ES6 這些比較新語(yǔ)法轉(zhuǎn)換成 ES5 的舊語(yǔ)法
• 需要對(duì)代碼進(jìn)行壓縮后再發(fā)布，這樣體積會(huì)比較小一些

Webpack or Rollup？

大部分的前端開發(fā)者接觸到的打包工具都是 Webpack，而很少接觸到 Rollup，我可以給大家簡(jiǎn)單講講這兩者有什么區(qū)別~eKZ28資訊網(wǎng)——每日最新資訊28at.com

Webpack

Webpack主要用于構(gòu)建復(fù)雜的前端項(xiàng)目。他能做以下這些事情：eKZ28資訊網(wǎng)——每日最新資訊28at.com

• 支持將多種資源（如JavaScript、CSS、圖片等）視為模塊，并通過(guò)模塊依賴關(guān)系進(jìn)行打包
• 提供了豐富的插件和加載器，能夠處理各種復(fù)雜的場(chǎng)景，如代碼分割、懶加載、熱模塊替換等
• 它還支持開發(fā)環(huán)境和生產(chǎn)環(huán)境的不同配置，使得項(xiàng)目開發(fā)和部署更加方便

由于 Webpack 的靈活性和豐富的功能，它適用于大型、復(fù)雜的項(xiàng)目，特別是那些包含大量模塊和資源、有復(fù)雜構(gòu)建需求的項(xiàng)目eKZ28資訊網(wǎng)——每日最新資訊28at.com

Rollup

Rollup是一個(gè)面向現(xiàn)代JavaScript應(yīng)用的模塊打包工具，專注于創(chuàng)建用于庫(kù)和類似庫(kù)的打包。具備以下這些特點(diǎn)：eKZ28資訊網(wǎng)——每日最新資訊28at.com

• 采用ES模塊作為標(biāo)準(zhǔn)，可以按需引入和打包代碼，并且能夠進(jìn)行 Tree Shaking，去除未使用的代碼，減小輸出文件大小
• 相對(duì)于 Webpack，Rollup 更加輕量級(jí)和簡(jiǎn)單，它不提供像Webpack那樣豐富的插件和加載器生態(tài)系統(tǒng)，但它的輸出更精簡(jiǎn)

小結(jié)

• Webpack 適合用在項(xiàng)目中
• Rollup 適用于開發(fā)一些工具庫(kù)、組件庫(kù)

所以我們開發(fā)工具庫(kù)是推薦使用 Rollup 來(lái)開發(fā)eKZ28資訊網(wǎng)——每日最新資訊28at.com

開發(fā)自己的工具庫(kù)

初始項(xiàng)目

首先新建一個(gè) npm-sx-test 的文件夾，用來(lái)開發(fā)我們的工具庫(kù)eKZ28資訊網(wǎng)——每日最新資訊28at.com

名字可以自己定~eKZ28資訊網(wǎng)——每日最新資訊28at.com

然后進(jìn)入到 npm-sx-test 中，運(yùn)行eKZ28資訊網(wǎng)——每日最新資訊28at.com

npm init

初始化一個(gè) npm 的環(huán)境~eKZ28資訊網(wǎng)——每日最新資訊28at.com

{     name: 'npm-sx-test', // 包名     main: 'index.js', // 包被引入時(shí)的入口文件     type: "module", // 代碼可以使用 ES6 模塊化    version: 1.0.0, // 版本     description: '', // 描述     author: 'zh', // 作者     contributors: '', // 其他貢獻(xiàn)者     dependencies: {}, // 生產(chǎn)依賴     devDependencies: {}, // 開發(fā)依賴     repository：'', // 源碼地址     keywords: [], // 包搜索關(guān)鍵字  }

接著在根目錄下，創(chuàng)建一個(gè)入口文件 index.js 以及一個(gè) utils 文件夾eKZ28資訊網(wǎng)——每日最新資訊28at.com

• index.js 用來(lái)統(tǒng)一導(dǎo)出所有工具函數(shù)
• utils 用來(lái)存放各種工具函數(shù)

圖片eKZ28資訊網(wǎng)——每日最新資訊28at.com

// permission.jsexport const checkPermission = (role) => {  // coding...  return role}// crypto.jsexport const crypto = (password) => {  // coding...  return password}// sso.jsexport const sso = (username) => {  // coding...  return username}// index.jsimport { crypto } from './utils/crypto'import { checkPermission } from './utils/permission'import { sso } from './utils/sso'export default {  crypto,  checkPermission,  sso}

配置 Rollup & Babel 打包環(huán)境

代碼寫完后，我們需要將他們打包，還記得我們上面說(shuō)了為啥要打包后再發(fā)布？eKZ28資訊網(wǎng)——每日最新資訊28at.com

• 1、需要把 ts、ES6 這些比較新語(yǔ)法轉(zhuǎn)換成 ES5 的舊語(yǔ)法
• 2、需要對(duì)代碼進(jìn)行壓縮后再發(fā)布，這樣體積會(huì)比較小一些

我們需要先安裝這些必要的插件eKZ28資訊網(wǎng)——每日最新資訊28at.com

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

接著創(chuàng)建一個(gè) rollup.config.js 用來(lái)存放 Rollup 打包的配置eKZ28資訊網(wǎng)——每日最新資訊28at.com

// rollup.config.jsimport babel from '@rollup/plugin-babel';export default {   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: {  // 配置監(jiān)聽(tīng)處理    exclude: 'node_modules/**'  },  plugins: [    // 使用插件 @rollup/plugin-babel    babel({      babelHelpers: 'bundled',      exclude: 'node_modules/**'    })  ]};

然后新建一個(gè) babel.config.js 用來(lái)配置 Babel ，它可以幫我們把一些高級(jí)語(yǔ)法轉(zhuǎn)成低級(jí)語(yǔ)法eKZ28資訊網(wǎng)——每日最新資訊28at.com

// babel.config.js{  "presets": [    [      "@babel/preset-env",      {        "modules": false      }    ]  ]}

配置打包命令

現(xiàn)在我們可以配置打包命令了，在 package.json 中，配置命令eKZ28資訊網(wǎng)——每日最新資訊28at.com

"scripts": {    "build": "rollup -c",         "serve": "rollup -c -w"  }

• -c：代表讀取配置去打包，默認(rèn)讀取根目錄下的babel.config.js
• -w：代表了 watch 監(jiān)聽(tīng)，調(diào)試的時(shí)候可以用~

運(yùn)行 npm run build 之后，我們可以看到打包成兩個(gè)版本eKZ28資訊網(wǎng)——每日最新資訊28at.com

• dist：產(chǎn)物是 Commonjs 模塊化
• es：產(chǎn)物是 ES6 模塊化

圖片eKZ28資訊網(wǎng)——每日最新資訊28at.com

圖片eKZ28資訊網(wǎng)——每日最新資訊28at.com

發(fā)布 NPM 包

首先我們需要把 NPM 的源設(shè)置成你想要的，一般都是設(shè)置為公司的私有倉(cāng)庫(kù)地址，但是這里我設(shè)置為公共倉(cāng)庫(kù)~eKZ28資訊網(wǎng)——每日最新資訊28at.com

npm config set registry https://registry.npmjs.org/

接著我們需要登錄 NPM ，進(jìn)行身份認(rèn)證~eKZ28資訊網(wǎng)——每日最新資訊28at.com

npm login

需要填寫這些信息eKZ28資訊網(wǎng)——每日最新資訊28at.com

• username：npm 的用戶名
• password：npm 的密碼
• email：npm 注冊(cè)的郵箱
• one-time password：郵箱接收的驗(yàn)證碼

圖片eKZ28資訊網(wǎng)——每日最新資訊28at.com

最后修改一下 package.json里eKZ28資訊網(wǎng)——每日最新資訊28at.com

加上 "main": "dist/index.js", 加上 "module": "es/index.js"  加上 "files": [    "es/*",    "dist/*"  ],

• 修改 main 是為了我們使用這個(gè)包時(shí)引用到 dist 里的文件
• 修改 files 是為了推送 npm 只推送所需要的文件上去就行

然后運(yùn)行 npm publish，就會(huì)將打包后的產(chǎn)物推送到 npm 上了~eKZ28資訊網(wǎng)——每日最新資訊28at.com

圖片eKZ28資訊網(wǎng)——每日最新資訊28at.com

使用函數(shù)庫(kù)

現(xiàn)在回到各個(gè)項(xiàng)目中，只需要eKZ28資訊網(wǎng)——每日最新資訊28at.com

npm i npm-sx-test

就可以使用我們自己的組件庫(kù)啦~eKZ28資訊網(wǎng)——每日最新資訊28at.com

import { checkPermission } from 'npm-sx-test'console.log(checkPermission('admin'))

eKZ28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-87679-0.html如何使用Rollup開發(fā)一個(gè)npm包并發(fā)布

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： Container包中的那些容器，你知道幾個(gè)？

下一篇： 一篇聊透云原生中的服務(wù)網(wǎng)格