0

如何配置 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)...
4

1 回答 1

0

您还应该将属性umdNamedDefine设置为true. 这就是output当我做一个 UMD 包装库时我的块通常看起来的样子。我将使用我目前拥有的 npm 包中的一个示例，因为它将是最能说明问题的：

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

鉴于我的 npm 包在 中命名dom-regex，package.json这允许我通过以下方式使用我的包：

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的存储库并测试下载包以了解其工作原理。

于 2017-01-23T16:54:21.437 回答