实现一个 Library 模块包

之前我们打包的都是开发业务代码，如何打包一个库代码供别人使用呢？

library

例如新建项目**library**：

library
├─package-lock.json
├─package.json
├─webpack.config.js
├─src
|  ├─index.js
|  ├─math.js
|  └string.js

打包入口文件：

import * as math from './math';
import * as string from './string';
export default {
  math,
  string
}

**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;
}

**Webpack**配置文件就是一些最基本的配置内容：

const path = require("path");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  }
}

这样一份简单的打包配置就做好了，但是呢我们的项目是一个代码库需要供别人使用的，别人会有很多种引入的方式，就像这样：

// 第一种 ESModule
import library from "library";
// 第二种 ComonJS
const library = require("library");
// 第三种 AMD
require(["library"],()=>{});
// 第四种 script
<srcript src="library"></script>

如果想让支持外部文件任何方式都可以引入我们的库就需要进行一个配置：

const path = require("path");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    // 不管是什么引入方式都可以使用(支持 CMD、AMD、ESModule)
    libraryTarget: "umd",
    // 支持 srcipt 标签引入，并生成全局变量
    library: "library"
  }
}

externals

Webpack中文：
外部扩展(Externals) | webpack 中文文档

假设我们的代码库引入了loadsh库，然后发布到了npm网站 ，别人在使用我们代码库的时候也引入了loadsh库，这就导致了重复加载。

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

如何避免一个库重复引入呢？
需要配置externals，这样别人在用我们库的时候就需要他自己引入啦。

const path = require("path");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  // 打包的过程中忽略 loadha 库，让别人的业务代码加载 loadsh
  externals: ["loadsh"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    // 不管是什么引入方式都可以使用(支持CMD、AMD、ESModule)
    libraryTarget: "umd",
    // 支持 srcipt 标签引入，并生成全局变量
    library: "library"
  }
}

最后我们写完自己的代码包需要部署到npm网站噢。