如何使用webpack打包一個(gè)庫library

用webpack打包時(shí)長會(huì)隨著代碼增加而變長,代碼量可能比較大的可以參考我的另一篇使用vite打包sdk文章.
使用vite打包libary模式打包sdk

如果你需要自己封裝一些包給別人使用,那么可以參考以下方法

初始化庫

mkdir library
cd library
npm init -y

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

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

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

在根目錄下新建src文件夾，新建一個(gè)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ù)新建一個(gè)index.js

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

export default {math,string}

簡單安裝webpack依賴

npm install webpack webpack-cli --save

安裝的同時(shí)，可以創(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",// 在全局變量中增加一個(gè)library變量
        libraryTarget:"umd"
    }
}

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

npm run build

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

如何使用呢？

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

// 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)建一個(gè)index.html，用script引入之前打包生成的library.js。瀏覽器打開index.html,在控制臺(tái)中輸入library,會(huì)得到如下所示的結(jié)果：

  <script src="../dist/library.js">
    </script>
    <script>
        console.log(library);
    </script>

如果不想要default這一層,在Index.js:

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

export { math, string }

一個(gè)簡單的庫便打包生成了。
注解：webpack中l(wèi)ibraryTarget配置項(xiàng)可以設(shè)為umd,表示采用umd規(guī)范，如果設(shè)置為this,表示在this下掛載了一個(gè)library變量。更多用法可參考

webpack官網(wǎng):https://webpack.js.org/configuration/output/#outputlibrarytarget

引入別的庫用法

假設(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]," ");
}

運(yùn)行打包命令，發(fā)現(xiàn)打包出來的庫體積變大了，因?yàn)槲覀円肓薼odash,導(dǎo)致包變大。怎么辦呢？修改webpack配置文件。
增加一個(gè)externals配置項(xiàng)：

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"
    }
}

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

以上就是一個(gè)簡單打包庫的過程，打包完成后，就可以使用npm相關(guān)命令將庫發(fā)布到npm倉庫，發(fā)布成功后，就可以讓別的小伙伴使用了。也可以直接發(fā)送打包后的文件給小伙伴引入使用 !

參考鏈接:https://segmentfault.com/a/1190000021318631文章來源地址http://www.zghlxwxcb.cn/news/detail-644140.html

到了這里，關(guān)于如何使用webpack打包一個(gè)庫library,使用webpack打包sdk.的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！