如何使用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学习笔记(七) js函数介绍
Jun 19 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
javascript实现行拖动的方法
May 27 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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中设置时区方法小结
2012/06/03 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php中的依赖注入实例详解
2019/08/14 PHP
列表内容的选择
2006/06/30 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
Internal修饰符有什么含义
2013/07/10 面试题
党员廉洁自律承诺书
2014/05/26 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
会计实训报告范文
2014/11/04 职场文书
党校党性分析材料
2014/12/19 职场文书
永远是春天观后感
2015/06/12 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技