快捷導(dǎo)航

如何使用webpack打包一個庫library的方法步驟

更新時間：2019年12月18日 09:17:08 作者：rocky191

這篇文章主要介紹了如何使用webpack打包一個庫library的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

初始化庫

mkdir library
cd library
npm init -y

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

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

簡單創(chuàng)建幾個文件

在根目錄下新建src文件夾，新建一個math.js和string.js。相關(guān)文件內(nèi)容如下：

// 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;
}

繼續(xù)新建一個index.js

import * as math from "./math";
import * as string from "./string";

export default {math,string}

簡單安裝webpack依賴

npm install webpack webpack-cli --save

安裝的同時，可以創(chuàng)建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"
  }
}

安裝成功后，執(zhí)行打包命令

npm run build

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

如何使用呢？

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

// es6方式
import library from "library"

// commonjs方式
const library=require("library")

// AMD方式
require(["library"],function(){})

// script標(biāo)簽引入
<script src="library.js"></script>

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

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

注解：webpack中l(wèi)ibraryTarget配置項可以設(shè)為umd,表示采用umd規(guī)范，如果設(shè)置為this,表示在this下掛載了一個library變量。更多用法可參考webpack官網(wǎng)。

引入別的庫用法

假設(shè)需要引入lodash.安裝lodash

npm install lodash --save

修改之前創(chuàng)建的string.js

import _ from "lodash";

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

運行打包命令，發(fā)現(xiàn)打包出來的庫體積變大了，因為我們引入了lodash,導(dǎo)致包變大。怎么辦呢？修改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"
  }
}

之后打包就會發(fā)現(xiàn)庫的體積又變小了。

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

參考資料

webpack output libraryTarget
webpack external

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: