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)...
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.