Webpack 4.0 从入门到精通：直面 Library 的打包与构建

前端

2024-02-18 06:20:46

前言

这个系列的学习笔记，前面的文章涉及知识点较多，内容篇幅较长，从这篇开始打算转变一下，缩短篇幅，划分出更多篇章方便学习。

Library 的打包

之前都是讲述如何对业务代码进行打包，这次我想分享一下如何对 Library 进行打包。

什么是 Library？

Library 是指可以被其他程序直接调用的代码库，一般来说，Library 都是以 npm 包的形式发布的。

Library 的打包与业务代码的打包有很多相似之处，但也有很多不同之处。

相似之处在于，Library 的打包也需要经过代码编译、模块化打包、资源处理等步骤。

不同之处在于，Library 的打包还需要考虑以下几点：

兼容性 ：Library 需要兼容多种环境，包括不同的操作系统、不同的浏览器、不同的 JavaScript 运行时等。
模块化 ：Library 需要以模块化的方式进行打包，以便于其他程序可以方便地调用。
发布：Library 需要发布到 npm 等公共仓库，以便于其他程序可以方便地安装和使用。

Library 打包工具的选择

目前，有很多 Library 打包工具可供选择，比较流行的有：

Webpack
Rollup
Parcel
Browserify

这些工具各有优缺点，没有一个工具是完美的。

对于 Library 的打包，我推荐使用 Webpack。

Webpack 是一个功能非常强大的打包工具，可以满足绝大多数 Library 的打包需求。

Webpack 的优点包括：

功能强大 ：Webpack 可以处理各种各样的文件类型，包括 JavaScript、CSS、图片、字体等。
高度可定制 ：Webpack 的配置非常灵活，可以满足各种不同的打包需求。
社区活跃 ：Webpack 的社区非常活跃，有很多资源和支持可供使用。

Webpack 的 Library 打包配置

Webpack 的 Library 打包配置与业务代码的打包配置有很多相似之处，但也有很多不同之处。

相似之处在于，Library 的打包也需要配置 entry、output、module 等属性。

不同之处在于，Library 的打包还需要配置以下属性：

library ：指定 Library 的名称，该名称将被用于在其他程序中引用该 Library。
libraryTarget ：指定 Library 的输出格式，可选的值有：
- umd：适用于在浏览器和 Node.js 中使用的 Library。
- commonjs2：适用于在 Node.js 中使用的 Library。
- commonjs：适用于在 Node.js 中使用的 Library，但该格式不兼容 ES 模块。
- var：适用于在浏览器中使用的 Library，该格式将 Library 暴露为一个全局变量。
- this：适用于在浏览器中使用的 Library，该格式将 Library 暴露为 this 的一个属性。
- window：适用于在浏览器中使用的 Library，该格式将 Library 暴露为 window 的一个属性。
externals ：指定 Library 的外部依赖，这些依赖不会被打包进 Library 中。

Library 打包的示例

下面是一个使用 Webpack 打包 Library 的示例：

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    library: 'MyLibrary',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
};