如何使用webpack打包一个库library的方法步骤


Posted in Javascript onDecember 18, 2019

日常我们开发了一个库之后,如何打包之后提供给别人使用呢?如果你不清楚,就继续看吧!!!

初始化库

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打包一个库library的方法步骤

一个简单的库便打包生成了。

注解:webpack中libraryTarget配置项可以设为umd,表示采用umd规范,如果设置为this,表示在this下挂载了一个library变量。更多用法可参考webpack官网。

引入别的库用法

假设需要引入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,优化方面的东西,我也正在逐渐学习中!

参考资料

webpack output libraryTarget
webpack external

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
ExtJS下grid的一些属性说明
Dec 13 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
js实现上传图片并显示图片名称
Dec 18 #Javascript
js实现多图和单图上传显示
Dec 18 #Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 #Javascript
微信小程序实用代码段(收藏版)
Dec 17 #Javascript
微信小程序修改数组长度的问题的解决
Dec 17 #Javascript
微信小程序利用云函数获取手机号码
Dec 17 #Javascript
ant design实现圈选功能
Dec 17 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python实现通过shelve修改对象实例
2014/09/26 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
使用python实现rsa算法代码
2016/02/17 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
tensorflow 查看梯度方式
2020/02/04 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python制作抽奖程序代码详解
2021/01/15 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
自我介绍演讲稿
2014/01/15 职场文书
蓝颜请假条
2014/04/11 职场文书
小学节能减排倡议书
2014/05/15 职场文书
招标承诺书
2014/08/30 职场文书
班级活动总结格式
2014/08/30 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
python神经网络Xception模型
2022/05/06 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python