如何使用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 构造函数 实例分析
Nov 26 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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自动生成月历代码
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
Python max内置函数详细介绍
2016/11/17 Python
python正则表达式的使用
2017/06/12 Python
Python读写文件基础知识点
2019/06/10 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Django中的cookie和session
2019/08/27 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
医药类个人求职的自我评价
2014/02/12 职场文书
空乘英文求职信
2014/04/13 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
培训计划通知
2015/07/15 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
表扬信范文
2019/04/22 职场文书