【webpack】新的起航23 -- 使用Library打包一个库

新的起航

前面20几篇差不多是做了webpack相关的基本（基础知识）配置笔记，当然做的笔记可能有错别字或者不深入的地方，如果想要更深入webpack可以在关于配置这部分 猛戳这里，相信你也可以有不一样的领悟~

扬帆

这篇我们新建一个webpack的demo来做这部分的演示，新建一个文件夹webpack-library，然后使用git Bash执行以下 npm init -y 直接生成默认的webpack配置，然后小修以下初始化生成的 package.json ，如下：

{
  "name": "webpack-library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "um",
  "license": "MIT"
}

新建三个文件放在src文件夹下面：
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 getString(a, b) {
    return a + '' + b;
}

index.js:

写一个集合两个文件函数内容的入口文件index

import * as math from './math'
import * as string from './string'

export default {
    math,
    string
}

假设上面就是一个简单的库文件，此时我们给别人用的话，那必须兼容一下浏览器将es6转义成es5 ↓

安装基本的webpack打包配置先：
npm install webpack webpack-cli --save

安装完成之后，新建一个webpack.config.js的配置文件，如果不写，webpack则会自己使用自己的默认配置进行打包，并且在package.json中添加一个script指令：

  "scripts": {
    "build": "webpack"
  },

webapck.config.js:

const path = require('path')

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

这些都是前面基础笔记里有的，这里就不在过多的解释了，如果不懂的话可以看 【webpack】快速笔记1 – 快速搭建属于自己的weback 这篇笔记快速入门，或者看webpack官方文档都行

打包编译npm run build：

到这里为止，可能你还不知道我要干嘛对吧？其实我们就是做一个插件库或者组件库的开发者，我们要将这个库文件给别人使用，就好比jquery，lodash这些工具库，我们要怎么做一个合格的共享者呢？我们一步一步往下看 ↓

从使用者的角度出发

用户是不是可以使用这几种引入方法 ↓

// 使用ES Module语法导入
import library from 'library'

// 使用CommonJS语法导入
const library = require('library')

// 使用AMD语法导入
require(['library'],function(){
	...
})

从上面可以看出，用户使用我们的库是有很多方式进行导入，那我们如何做到像jquery等一些插件库那样完善呢？我们可以在配置文件中这样配置 ↓

    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'library.js',
        library: 'library',       // + 新增 定义为全局变量
        libraryTarget: 'umd'   // + 新增 定义为支持多种导入
    }

参数说明：

library:'library' - 将library设置为全局变量，这样就可以直接使用library去调用库里面的方法~
libraryTarget: 'umd' - 这会在所有模块定义下公开您的库，允许它与CommonJS，AMD和全局变量一起使用。查看 UMD存储库 以了解更多信息~

关于更多的libraryTarget的参数选项可以参考webpack文档 output.libraryTarget

完成检测：

基本配置完成之后我们重新打包一下npm run build，我们来当一下用户去使用这个library的库，我们直接在dist > index.html，使用script便签引入这个库，然后页面运行，在控制台输入全局对象library可以看到，对象里面可以看到有我们之前写的方法函数，over~

结果如下：

库中库

什么是库中库呢？就是比如我当前这个library打包文件使用了其他的第三方插件库，比如在string.js 中使用lodash：

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

此时我们重新打包文件可以看到，打包文件瞬间飙升到70多kb

此时我们可以这样想，我不想把lodash这种第三方依赖库打包进入我的library库中，我想让用户进行下载导入，否则报错，那我们可以在 webpack.config.js 中配置external 参数就是为想要用户自行下载的第三方的插件库名，如下：

module.exports = {
    mode: 'production',
    entry: './src/index.js', 
    externals: 'lodash',  //  + 新增
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'library.js',
        library: 'library',
        libraryTarget: 'umd'
    }
}

这里的配置参数可以写成数组（当有多个第三方插件库时），或者写成对象（当需要配置其他参数时），这里可以参考一下官方文档的关于 externals 配置

完成配置：

完成基本配置后我们重新打包编译，此时发现webpack忽略了lodash第三方插件库的打包，打包文件变回原来差不多的体积大小，此时用户使用我们库时，就需要用户再去拉一下lodash的库才能使用我们library的功能（当然这种很少会有，既然自己研发的库，怎样也整个原生的吧~）

通过npm社区进行库的分享

首先百度一下npm进入官网，没有账号的就注册一个npm账号，然后我们的目的就是将我们这个建议的库文件library提交到npm线上，然后用户就可以直接通过npm install <库名>进行对应的库文件下载；如何操作呢？ ↓

① 我们首先要修改一下package.json 里面main的配置，因为此时我们的主要文件并不是index.js，应该改成./dist/library 才行，并且name也要改成独特一点，因为Npm仓库中是不能有相同名字的，所以可以改成自己独特的即可，这里我设置为library-um-2019

② 然后我们将注册并且通过邮箱验证的账号，在命令行中连接起来npm adduser，然后就会提示你填写同户名，密码，以及验证的邮箱（这些就按照注册时的填写即可），然后就npm publish 即可提交，然后可以在命令行中看到如图即可，或者去我们的npm仓库账号也是可以看到自己提交上去的包文件；

当然你会遇到一些报错

关于报错信息的可以看这两篇文章写的挺全的 →

如何将代码提交到npm库及其报错处理
在npm上发布自己的包

结语

关于如何将自己写的库给别人用的打包配置，其实说的挺基础的，如果真正去配置一个线上库其实是需要配置很多东西，其中会涉及到复杂的代码分割，性能优化，Node环境配置等，并不是这里说的那么简单，关于这个还得对webpack的知识有更深层次的了解才行

#下一篇【关于Progressive Web Application的打包配置】