专栏首页coding for love5-1 library 的打包

5-1 library 的打包

1. 简介

我们开发一个库,供别人使用 npm 下载使用时,为了保证兼容性和体积,应该将其打包。本节介绍如何打包一个库进行发布。

2. 初始化项目

首先,我们新建一个目录,叫 library-demo,进入该目录,运行命令:

npm init -y

这样我们就初始化了一个项目,并为其自动创建了一个 package.json 如下:

{
  "name": "library-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

这个package.json 很简单,介绍了一些项目信息,以及入口文件。

3. 实现库逻辑

我们实现以下库逻辑,新建目录 src, 然后在其下新建三个文件:

// math.js
export const add = (a, b) => a + b;
export const minus = (a, b) => a - b;
// string.js
export const join = (a, b) => a + ' ' + b;
// index.js
import * as math from './math';
import * as string from './string';

export default {
  math,
  string
}

4. 使用 webpack 进行打包

首先,安装 webpack,如下:

npm i webpack webpack-cli -D

然后新建一个配置文件:

// webpack.config.js
const path = require('path');

module.exports= {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'library-demo.js'
  }
};

修改 package.json 如下部分:

  "main": "dist/index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

然后运行打包命令如下:

npm run build

image.png

5. umd

库文件打包后,使用者在引入时,可能有多种方法,比如 amd,cmd,commonjs,甚至是直接使用 script 引入。所以我们可以将库导出为一个 umd 模块,支持以上所有的使用场景,如下:

    library: "libraryDemo", // the name of the exported library
    libraryTarget: "umd", // universal module definition

6. externals

假设我们开发的库文件中本身引用了一个三方库,如下:

// string.js
import _ from 'lodash'
export const join = (a, b) => _.join([a, b], ' ');

我们安装 loadash 后打包:

npm i lodash -S

image.png

可以看到 lodash 被打入进来,大大增加了包体,且拖慢了打包速度。lodash 这类三方库其实一般都很稳定,可以单独拿出来加载并缓存。如下:

  externals: {
    _: 'lodash'
  }

打包后,发现没有引入 lodash,包体大大减小:

image.png

用户使用的时候需要自己手动引入 lodash。

7. 发布

发布前我们首先需要注册一个 npm 账号,https://www.npmjs.com/ 然后使用 npm adduser 或者 npm login 来登录,记得在此之前将 npm 的源切换到 npm 而不是 cnpm 或者其他源,除非你本意是在其他源上进行发布。 然后 npm publish 发布即可。

参考

https://webpack.js.org/configuration/ 可能是最详细的UMD模块入门指南 JS通用模块模式 UMD 模块化之AMD、CMD、UMD、commonJS webpack 的externals配置 https://webpack.js.org/configuration/externals/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 5-10~11 webpack 性能优化(2)

    然后我们修改一下 home.jsx 代码,增加一个三方库,lodash。我们装一下 lodash 然后引入:

    love丁酥酥
  • 4-12 环境变量的使用

    其实我么之前已经将webpack.config.js 按环境进行去了区分配置,那么在公共配置文件中我们能否知道当前所处的环境,并据此做逻辑区分呢?

    love丁酥酥
  • 2-5 浅析webpack打包内容

    Hash:本次打包的一个标识。 Version:使用的webpack版本 Time:本次打包耗时 Built at: 生成时间

    love丁酥酥
  • 【react】开发一款城市选择组件

    糊糊糊糊糊了
  • 渗透测试:内网DNS投毒技术劫持会话

    本文仅供渗透测试技术学习及教学用途,禁止非法使用 最近一段时间一直在研究内网中嗅探的一些方法,各种方式的尝试,才找到一个比较靠谱的一种方式。dns投毒与中间人。...

    FB客服
  • three.js 新手指南

    在这个分步指南中,我们将使用一个基于 WebGL 的 3D 图形的框架 three.js, 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者...

    疯狂的技术宅
  • node路由去中心化

    random_wang
  • 精通gulp常用插件

    描述:给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css

    IMWeb前端团队
  • npm scripts的生命周期管理

    我们平时阅读一些开源项目,可能会发现有些项目的package.json里的scripts区域定义的脚本很复杂,令人眼花缭乱。

    Jerry Wang
  • 精通gulp常用插件

    本文作者:IMWeb 林鑫 原文出处:IMWeb社区 未经同意,禁止转载 本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券