通过webpack构建library库

构建 library

webpack 除了打包应用程序代码,还可以用于打包 JavaScript library

应用场景

  1. 提炼高可服用工具类 code
  2. 构建 UI 库
  3. 根据业务需求,在其他 UI 库的基础上做业务组件封装

...

兼容性

用户应该能够通过以下方式访问 library

  • ES2015 模块

import webpackNumbers from 'webpack-numbers'

  • CommonJS 模块

require('webpack-numbers')

  • AMD
  • CMD
  • 全局变量,当通过 script 脚本引入时
  • Nodejs

output

跟 webpack 打包部署代码最大的不同点就在于 output 输出属性的配置上,webpack 为构建 lib 提供了 library,libraryTarget, libraryExport 等属性

output: {
   path: path.resolve(__dirname, 'dist'),
   filename: 'myLib.js',
   library: 'myLib', // 暴露出去的变量的名字
   libraryTarget: 'umd'
}

library

暴露的模块名称。取决于 libraryTarget 的值,当 libraryTarget:commonjs2 时无效

libraryTarget

暴露library的方式

  • 变量,以 script 方式引用, 默认值。 node 环境不支持

    • var
    • assign

这两个属性,都是在全局创建一个变量,只有定义与未定义的区别,并不能在 nodejs 中得的支持,并且存在变量冲突的可能性

module.exports = {
  mode: "production",
  entry: "./q-library/index.js",
  output: {
    path: path.resolve(process.cwd(), "./lib"),
    filename: "q-library.js",
    library: "qlibrary", // 模块名称
    libraryTarget: "assign",
  },
};

输出代码示例
通过webpack构建library库_第1张图片

  • 对象属性

    • window。在 window 对象上定一个 library 设置的变量,不支持 node。
    • global。在 global 对象上定义一个 library 设置的变量。受 target 属性影响,当 target 为默认值 web 时,会在 window 上注册,如果你想在 global 上注册,必须修改 target 为 node
    • this。在当前 this 对象上定义一个 library 设置的变量。如果 this 是 window,就在 window。在 node 的环境中,如果没指定 require 赋值的变量,并不会在指向 global。
module.exports = {
  mode: "production",
  entry: "./q-library/index.js",
  target: "node", // 默认值为 web, 如果想导出属性绑定在 gloabl 对象上,必须修改此属性为 node
  output: {
    path: path.resolve(process.cwd(), "./lib"),
    filename: "q-library2.js",
    library: "qlibrary2", // 模块名称
    libraryTarget: "global",
  },
};

输出代码示例
通过webpack构建library库_第2张图片

  • 模块定义

    • commonjs。在 export 对象上定义 library 设置的变量,不支持浏览器。
    • commonjs2。直接用 module.export 导出 export,会忽略 library 设置的变量。不支持浏览器
    • amd。在 define 方法上定义 library 设置的变量,不能用 script 直接引用,必须通过第三方模块 RequireJS 来时用
    • umd。兼容的模块化定义。该方案支持 commonjs、commonjs2、amd,可以在浏览器、node 中通用。但是如果你想做到这一点,必须要额外设置,umdNamedDefine: true,globalObject: ‘this’,umdNamedDefine 为设置 amd 前置名称使用 library 设置的变量,globalObject 为改变全局指向。当然便捷的引入一定会带来一定的冗余,这就看你如何取舍了。最后建议,如果目标明确,我只是兼容 nodejs,那么选择 commonjs/commonjs2,如果只兼容浏览器,那就选择暴露变量的方式,如果想通用,那就选择 umd 的方式,对于不同的情况做多种处理方式,是非常明智的选择。
module.exports = {
  mode: "production",
  entry: "./q-library/index.js",
  // target: 'node',// 默认值为 web, 如果想导出属性绑定在 gloabl 对象上,必须修改此属性为 node
  output: {
    path: path.resolve(process.cwd(), "./lib"),
    filename: "q-library3.js",
    library: "qlibrary3", // 模块名称
    libraryTarget: "umd",
    globalObject: "this",
    umdNamedDefine: true,
  },
};

输出代码示例
通过webpack构建library库_第3张图片

通过webpack构建library库_第4张图片

  • libraryExport

配置哪个或者哪些模块将通过 libraryTarget 暴露出来

这个属性的常用方式是和 libraryTarget 一起使用

// 将mudule.exports 的default直接导出
{
    libraryTarget: 'commonjs2',
    libraryExport: 'default'
}

externals

  • 如果构建的 library 依赖第三方 library,但是又不想把这个依赖打包到自己的 library 中。把依赖的主动权交给用户
  • 这意味着你的 library 需要一个名为 lodash 的依赖,这个依赖在用户的环境中必须存在且可用
externals: {
  lodash: {
  commonjs: 'lodash',
  commonjs2: 'lodash',
  amd: 'lodash',
  root: '\_'
  }
}

你可能感兴趣的:(webpack,npm,javascript)