背景

前幾天老大說現(xiàn)在團(tuán)隊(duì)中很多冗余代碼，而其中一部分就表現(xiàn)在，很多項(xiàng)目都重復(fù)寫了一些一模一樣的工具函數(shù)，比如：

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

其實(shí)這些函數(shù)在每一個(gè)項(xiàng)目中都是一模一樣的，沒必要每一個(gè)項(xiàng)目都寫一遍，這種做法有很多壞處

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

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

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

類比

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

npm i lodash -D

然后我們就會在 node_modules中看到這個(gè)包，并且可以去使用它~

圖片

import { cloneDeep } from 'lodash'

const obj1 = {};
const obj2 = cloneDeep(obj1)

這些包長啥樣？

我們打開 node_modules 中的 lodash 發(fā)現(xiàn)，里面其實(shí)都是打包后的產(chǎn)物，也就是開發(fā) lodash 的開發(fā)者，編寫一些例如 ts、ES6 語法的代碼后，進(jìn)行 打包后 發(fā)布到 npm 上，我們才可以通過 npm i lodash 去安裝它~

圖片

那為啥要 打包后 才發(fā)布到 npm 上呢？這是因?yàn)?/p>

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

Webpack or Rollup？

大部分的前端開發(fā)者接觸到的打包工具都是 Webpack，而很少接觸到 Rollup，我可以給大家簡單講講這兩者有什么區(qū)別~

Webpack

Webpack主要用于構(gòu)建復(fù)雜的前端項(xiàng)目。他能做以下這些事情：

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

由于 Webpack 的靈活性和豐富的功能，它適用于大型、復(fù)雜的項(xiàng)目，特別是那些包含大量模塊和資源、有復(fù)雜構(gòu)建需求的項(xiàng)目

Rollup

Rollup是一個(gè)面向現(xiàn)代JavaScript應(yīng)用的模塊打包工具，專注于創(chuàng)建用于庫和類似庫的打包。具備以下這些特點(diǎn)：

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

小結(jié)

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

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

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

初始項(xiàng)目

首先新建一個(gè) npm-sx-test 的文件夾，用來開發(fā)我們的工具庫

名字可以自己定~

然后進(jìn)入到 npm-sx-test 中，運(yùn)行

npm init

初始化一個(gè) npm 的環(huán)境~

{ 
    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 文件夾

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

圖片

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

export default {
  crypto,
  checkPermission,
  sso
}

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

代碼寫完后，我們需要將他們打包，還記得我們上面說了為啥要打包后再發(fā)布？

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

我們需要先安裝這些必要的插件

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

接著創(chuàng)建一個(gè) rollup.config.js 用來存放 Rollup 打包的配置

// rollup.config.js
import 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)聽處理
    exclude: 'node_modules/**'
  },
  plugins: [
    // 使用插件 @rollup/plugin-babel
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    })
  ]
};

然后新建一個(gè) babel.config.js 用來配置 Babel ，它可以幫我們把一些高級語法轉(zhuǎn)成低級語法

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

配置打包命令

現(xiàn)在我們可以配置打包命令了，在 package.json 中，配置命令

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

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

運(yùn)行 npm run build 之后，我們可以看到打包成兩個(gè)版本

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

圖片

圖片

發(fā)布 NPM 包

首先我們需要把 NPM 的源設(shè)置成你想要的，一般都是設(shè)置為公司的私有倉庫地址，但是這里我設(shè)置為公共倉庫~

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

接著我們需要登錄 NPM ，進(jìn)行身份認(rèn)證~

npm login

需要填寫這些信息

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

圖片

最后修改一下 package.json里

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

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

然后運(yùn)行 npm publish，就會將打包后的產(chǎn)物推送到 npm 上了~

圖片

使用函數(shù)庫

現(xiàn)在回到各個(gè)項(xiàng)目中，只需要

npm i npm-sx-test

就可以使用我們自己的組件庫啦~

import { checkPermission } from 'npm-sx-test'

console.log(checkPermission('admin'))