webpack打包Library库文件指南

本文示例仓库地址： https://github.com/liuchenyang0515/Library_pack

当自己写了一个js想让其他业务方引入，但是别人可能有很多种方式引入库文件，所以我们需要满足别人各种可能的引入方式。

可能是ES6 Module方式导入

import library from 'library';

可能是commonjs方式导入

const library = require('library');

也可能用amd语法引入这个库文件

require(['library'], function() {
	
})

还可能直接用<script>标签引入

<script src="./library.js"></script>

来个例子，我们先新建3个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 math from './math'
import string from './string'
export { math, string }

此时我们可以在webpack配置文件output里面添加一项属性libraryTarget:'umd'，这是什么意思呢？ UMD的全称是Universal Module Definition ，也就是通用模块标准，它的目标是使一个模块能运行在各种环境下，不论是CommonJS、AMD、ES6 Module或者非模块化环境都能正确引入到库文件

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js',
        libraryTarget: 'umd'
    }

但是如果我想要别人在用<script>标签引入的时候，能在全局访问到这个模块从而访问math和string里面的函数应该怎么做呢？ 在output里面继续添加一项属性library:mylib

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'library.js',
        library: 'mylib',
        libraryTarget: 'umd'
    }

在这里插入图片描述

<script>引入这个js 后发现mylib是在window里面的，直接可以打印，如果不配置这个属性library:mylib，控制台会显示mylib is not defined

安装第三方模块npm i lodash -S，修改string.js

import _ from 'lodash'
export function join(a, b) {
    return _.join([a, b], ' ');
}

开始打包

此时我的library.js里面就有了lodash.js，然而需求方的业务代码可能也有 需要引入lodash模块，那么他的引入很可能如下

import library from 'library'
import _ from 'lodash'

这样需求方打包我们的代码和lodash模块代码，这样就打包了2次lodash，增大了体积。 我们可以这样做在module.exports里面写上externals: ["lodash"]，代表打包过程需要忽略的库是lodash。 接着打包看看

在这里插入图片描述

明显看得到前面72.8KB变成了1.64KB 但是这样我们打包出的库文件就不能直接用了，这里会依赖lodash，所以引入library的时候必须同时引入lodash了。

import _ from 'lodash'
import library from 'library'

这样既避免了两次lodash的打包，又能让我们的程序正确运行。 为了方便第三方引入，你可以在写文档的时候注明，引入本js前必须引入lodash，然后给一个引入示例，别人就看得懂了