Webpack输出带有CamelCase和脊柱案例名称的UMD库

Question

How do I configure Webpack to create UMD bundle, so that package name for AMD and CommonJS will be named in lowercase (spinal-case), and for global context will have CamelCase name?

For example I expect my bundle to start with

(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
})...

This is how it looks in 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

You also should have the property umdNamedDefine set to true . This is what my output block commonly looks like when I do a UMD wrapped library. I will use an example from an npm package that I currently have as it will be the most illustrative:

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

Given that my npm package is named dom-regex in the package.json , this allows me to use my packages in the following ways:

ES6:

import DomRegex from 'dom-regex';

RequireJS

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

On the window: (if the file is exposed directly to the window)

window.DomRegex

---

What the name is exported as in the UMD wrapped section isn't as important as what you name it when you import it. Using dom-regex as an example, even if I had it locally in my project (not in node_modules), and the filename was dom-regex.js , I could still do all the previous examples, because it is UMD wrapped:

You're welcome to explore the repo for dom-regex and test download the package to see how this works.