經過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",
  },
};

輸出代碼示例

• 對象屬性

  • 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",
  },
};

輸出代碼示例

• 模塊定義

  • commonjs。在 export 對象上定義 library 設置的變量，不支持瀏覽器。
  • commonjs2。直接用 module.export 導出 export，會忽略 library 設置的變量。不支持瀏覽器
  • amd。在 define 方法上定義 library 設置的變量，不能用 script 直接引用，必須經過第三方模塊 RequireJS 來時用
  • umd。兼容的模塊化定義。該方案支持 commonjs、commonjs二、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,
  },
};

輸出代碼示例

• 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: '\_'
  }
}