如何使用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 相关文章推荐
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
javascript 中的继承实例详解
May 05 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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
PHP中数组的分组排序实例
2014/06/01 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
js实现日期级联效果
2014/01/23 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
微信跳一跳python代码实现
2018/01/05 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
物流业务员岗位职责
2015/04/03 职场文书
百年孤独读书笔记
2015/06/29 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS