如何使用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入门教程(3) js面向对象
Jan 31 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
js编写简易的计算器
Jul 29 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
python绘图库Matplotlib的安装
2014/07/03 Python
Python中的作用域规则详解
2015/01/30 Python
对python中return和print的一些理解
2017/08/18 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
六一儿童节活动总结
2014/08/27 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
自书遗嘱范文
2015/08/07 职场文书
单位提档介绍信
2015/10/22 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis