[英]How to universally export an NPM module (for the Browser)?
I wrote an NPM module.我写了一个 NPM 模块。 Let's say this is it:
让我们说就是这样:
class MyModule {
// bla bla
};
I want to export MyModule
in an universal way , so people can import it in the Browser in any of the 3 most popular approaches :我想以通用方式导出
MyModule
,以便人们可以通过3 种最流行的方法中的任何一种将其导入浏览器:
Using ES6 Imports:使用 ES6 导入:
// If a transpiler is configured (like Traceur Compiler, Babel, Rollup or Webpack): import MyModule from 'my-npm-module';
Use CommonJS Imports使用 CommonJS 导入
// If a module loader is configured (like RequireJS, Browserify or Neuter): const MyModule = require('my-npm-module');
Just reference the script file in the HTML:只需引用 HTML 中的脚本文件:
<script src="/node_modules/my-npm-module/index.js">
<script>
const module = new MyModule();
</script>
How can I do that?我怎样才能做到这一点? How should I export my
MyModule
?我应该如何导出我的
MyModule
?
What you're looking for is the Universal Module Definition (UMD) pattern.您正在寻找的是通用模块定义 (UMD) 模式。 It is defined here: https://github.com/umdjs/umd
它在这里定义: https : //github.com/umdjs/umd
It's a pattern that provides a clean way to provide your module to different environments that consume modules in a variety of ways.这是一种模式,它提供了一种干净的方式来将您的模块提供给以各种方式使用模块的不同环境。
The standard pattern is:标准模式是:
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['dependency'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('dependency'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.dependency);
}
}(this, function (dependency) {
// Use dependency in some fashion.
return {
// Your Module goes here
};
}));
If you're using grunt or gulp or webpack, you'll find that there is a plugin that can wrap your modules like this for you;如果你使用 grunt 或 gulp 或 webpack,你会发现有一个插件可以像这样为你包装你的模块; indeed, it's in the core of webpack already.
事实上,它已经是 webpack 的核心了。
just an example from yeoman https://github.com/umdjs/umd/blob/master/templates/returnExports.js只是来自自耕农的一个例子https://github.com/umdjs/umd/blob/master/templates/returnExports.js
// create a simplified module returnExport that has no dependency
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
}
}(this, function () {
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return {};
}));
I suggest also to see the source code of the famous Q library我建议也看看著名的 Q 库的源代码
Try with:尝试:
(function(exports) {
class MyModule {
// ...
}
exports = MyModule;
})(typeof exports === 'undefined' ? this['MyModule'] = {} : exports)
Then, if you want to publish your NPM package, just follow the official docs: https://docs.npmjs.com/getting-started/publishing-npm-packages然后,如果你想发布你的 NPM 包,只需按照官方文档: https : //docs.npmjs.com/getting-started/publishing-npm-packages
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.