如何使用webpack打包一個庫library？

日常我們開發了一個庫之后，如何打包之后提供給別人使用呢？如果你不清楚，就繼續看吧！！！

 

初始化庫

mkdir library cd library npm init -y

經過以上步驟后會生成一個library文件夾，里面包含一個package.json文件。然后簡單修改為如下所示：

{
  "name": "library", "version": "1.0.0", "description": "", "main": "./dist/library.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "rocky", "license": "MIT" }

 

簡單創建幾個文件

在根目錄下新建src文件夾，新建一個math.js和string.js。相關文件內容如下：

// math.js export function add(a,b){ return a+b; } export function minus(a,b){ return a-b; } export function multiply(a,b){ return a*b; } export function division(a,b){ return a/b; }

// string.js export function join(a,b){ return a+" "+b; }

繼續新建一個index.js

import * as math from "./math"; import * as string from "./string"; export default {math,string}

 

簡單安裝webpack依賴

npm install webpack webpack-cli --save

安裝的同時，可以創建webpack配置文件webpack.config.js，如下配置：

const path = require("path"); module.exports={ mode:"production", entry:"./src/index.js", output:{ path:path.resolve(__dirname,"dist"), filename:"library.js", library:"library",// 在全局變量中增加一個library變量 libraryTarget:"umd" } }

安裝成功后，執行打包命令

npm run build

之后會在根目錄下生成一個dist文件夾，里面包含一個library.js。

 

如何使用呢？

如果別人要使用這個打包后的library.js的話，可能會有如下幾種方式：

// es6方式 import library from "library" // commonjs方式 const library=require("library") // AMD方式 require(["library"],function(){}) // script標簽引入 <script src="library.js"></script>

在dist文件夾里創建一個index.html，用script引入之前打包生成的library.js。瀏覽器打開index.html,在控制台中輸入library,會得到如下所示的結果：

一個簡單的庫便打包生成了。

注解：webpack中libraryTarget配置項可以設為umd,表示采用umd規范，如果設置為this,表示在this下掛載了一個library變量。更多用法可參考 webpack官網 。

電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com

引入別的庫用法

假設需要引入lodash.安裝lodash

npm install lodash --save

修改之前創建的string.js

import _ from "lodash"; export function join(a,b){ // return a+" "+b; return _.join([a,b]," "); }

運行打包命令，發現打包出來的庫體積變大了，因為我們引入了lodash,導致包變大。怎么辦呢？修改webpack配置文件。

增加一個externals配置項：

const path =require("path"); module.exports={ mode:"production", entry:"./src/index.js", externals:["lodash"],// 配置不打包文件 output:{ path:path.resolve(__dirname,"dist"), filename:"library.js", library:"library", libraryTarget:"umd" } }

之后打包就會發現庫的體積又變小了。

以上就是一個簡單打包庫的過程，打包完成后，就可以使用npm相關命令將庫發布到npm倉庫，發布成功后，就可以讓別的小伙伴使用了。當然在實際情況中，打包一個庫的話，需要做的還有很多，比如tree-shaking,優化方面的東西，我也正在逐漸學習中！