Webpack輸出帶有CamelCase和脊柱案例名稱的UMD庫

Question

如何配置Webpack來創建UMD捆綁包，以便AMD和CommonJS的包名稱將以小寫字母（小寫字母）命名，而全局上下文的名稱將為CamelCase名稱？

例如，我希望我的捆綁包以

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("dependency"));
    else if(typeof define === 'function' && define.amd)
        define("my-library", ["dependency"], factory);           // spinal-case
    else if(typeof exports === 'object')
        exports["my-library"] = factory(require("dependency"));  // spinal-case
    else
        root["MyLibrary"] = factory(root["dependency"]);         // CamelCase
})...

這是在ReactDOM中的樣子：

(function(f) {
  // CommonJS
  if (typeof exports === "object" && typeof module !== "undefined") {
    module.exports = f(require('react'));

  // RequireJS
  } else if (typeof define === "function" && define.amd) {
    define(['react'], f);

  // <script>
  } else {
    var g;
    if (typeof window !== "undefined") {
      g = window;
    } else if (typeof global !== "undefined") {
      g = global;
    } else if (typeof self !== "undefined") {
      g = self;
    } else {
      // works providing we're not in "use strict";
      // needed for Java 8 Nashorn
      // see https://github.com/facebook/react/issues/3037
      g = this;
    }
    g.ReactDOM = f(g.React);
  }
})(function(React)...

Answer 1

您還應該將umdNamedDefine屬性設置為true 。 這是我做UMD包裝的庫時通常的output塊。 我將使用當前擁有的一個npm包中的示例，因為這將是最說明性的：

output: {
    path: './lib',
    filename: 'dom-regex.js',
    library: 'DomRegex',
    libraryTarget: 'umd',
    umdNamedDefine: true
},

鑒於我的npm軟件包在package.json名為dom-regex ，這使我可以通過以下方式使用我的軟件包：

ES6：

import DomRegex from 'dom-regex';

需求JS

var DomRegex = require('dom-regex');

在窗口上：（如果文件直接顯示在窗口上）

window.DomRegex

---

在UMD包裝部分中導出的名稱並不像在導入時命名的名稱那么重要。 以dom-regex為例，即使我在項目本地（而不是在node_modules中），並且文件名是dom-regex.js ，我仍然可以做所有前面的示例，因為它是UMD包裝的：

歡迎您瀏覽dom-regex的倉庫，並測試下載該軟件包以了解其工作原理。