如何使用webpack打包一个库library的方法步骤

 更新时间:2019年12月18日 09:17:08   作者:rocky191  
这篇文章主要介绍了如何使用webpack打包一个库library的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

日常我们开发了一个库之后,如何打包之后提供给别人使用呢?如果你不清楚,就继续看吧!!!

初始化库

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中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的闭包,原型,和匿名函数之旅

    Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性,本文给大家介绍js的闭包,原型,和匿名函数之旅,感兴趣的朋友一起学习吧
    2015-10-10
  • 一文搞懂如何避免JavaScript内存泄漏

    一文搞懂如何避免JavaScript内存泄漏

    SPA的兴起,促使我们更加关注与内存相关的JavaScript编码实践。如果应用使用的内存越来越多,就会严重影响性能,甚至导致浏览器的崩溃。下面就来看看JavaScript中常见的内存泄漏以及如何避免内存泄漏
    2022-05-05
  • JavaScript OOP类与继承

    JavaScript OOP类与继承

    JavaScript OOP类与继承实现代码,需要的朋友可以参考下。
    2009-11-11
  • javascript 可控式透明特效实现代码

    javascript 可控式透明特效实现代码

    透明特效是script.aculo.us提到的特效中最简单的特效之一。既然是特效,必须涉及时间与空间的概念。时间我们可以用setTimeout与setInterval,个人比较喜欢setTimeout,虽然它每次调用都重复注册,但可控性比较好。
    2010-01-01
  • zTree插件之单选下拉菜单实例代码

    zTree插件之单选下拉菜单实例代码

    zTree插件之单选下拉菜单实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 原生JS实现图片懒加载(lazyload)实例

    原生JS实现图片懒加载(lazyload)实例

    图片懒加载也是比较常见的一种性能优化的方法,本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例,这里整理了详细的代码,有需要的小伙伴可以参考下
    2017-06-06
  • Javascript中call的两种用法实例

    Javascript中call的两种用法实例

    这篇文章主要介绍了Javascript中call的两种用法实例,有需要的朋友可以参考一下
    2013-12-12
  • Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

    Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)

    这篇文章主要介绍了Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理),需要的朋友可以参考下
    2015-01-01
  • JS获取字符对应的ASCII码实例

    JS获取字符对应的ASCII码实例

    下面小编就为大家带来一篇JS获取字符对应的ASCII码实例。小编觉得挺不错的,现在就想给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript实现随机码的生成与校验

    JavaScript实现随机码的生成与校验

    这篇文章主要为大家详细介绍了JavaScript实现随机码的生成与校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论