如何使用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的密码强度验证代码
Mar 01 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 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使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
laravel自定义分页效果
2017/07/23 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
获取body标签的两种方法
2011/10/13 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
人力资源专业推荐信
2013/11/29 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
学校端午节活动方案
2014/08/23 职场文书
家属答谢词
2015/01/05 职场文书
运动员入场词
2015/07/18 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript