如何使用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动态加载javascript以减少服务器压力
Oct 29 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
js返回顶部实例分享
Dec 21 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
layui动态表头的实现代码
Aug 22 Javascript
JS判断数组四种实现方法详解
Jun 29 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
python3的print()函数的用法图文讲解
2019/07/16 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
政工例会汇报材料
2014/08/26 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js