如何使用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 相关文章推荐
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
json数据的列循环示例
Sep 06 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
JS Canvas接口和动画效果大全
Apr 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
php下过滤HTML代码的函数
2007/12/10 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
简单的js表单验证函数
2013/10/28 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
python的id()函数介绍
2013/02/10 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
python单例设计模式实现解析
2020/01/07 Python
Python中格式化字符串的四种实现
2020/05/26 Python
JSF界面控制层技术
2013/06/17 面试题
经济管理自荐书
2014/06/09 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
员工年终考核评语
2014/12/31 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
诚信高考倡议书
2019/06/24 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Redis 限流器
2022/05/15 Redis