[英]How to universally export an NPM module (for the Browser)?
我写了一个 NPM 模块。 让我们说就是这样:
class MyModule {
// bla bla
};
我想以通用方式导出MyModule
,以便人们可以通过3 种最流行的方法中的任何一种将其导入浏览器:
使用 ES6 导入:
// If a transpiler is configured (like Traceur Compiler, Babel, Rollup or Webpack): import MyModule from 'my-npm-module';
使用 CommonJS 导入
// If a module loader is configured (like RequireJS, Browserify or Neuter): const MyModule = require('my-npm-module');
只需引用 HTML 中的脚本文件:
<script src="/node_modules/my-npm-module/index.js">
<script>
const module = new MyModule();
</script>
我怎样才能做到这一点? 我应该如何导出我的MyModule
?
您正在寻找的是通用模块定义 (UMD) 模式。 它在这里定义: https : //github.com/umdjs/umd
这是一种模式,它提供了一种干净的方式来将您的模块提供给以各种方式使用模块的不同环境。
标准模式是:
(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
};
}));
如果你使用 grunt 或 gulp 或 webpack,你会发现有一个插件可以像这样为你包装你的模块; 事实上,它已经是 webpack 的核心了。
只是来自自耕农的一个例子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 {};
}));
我建议也看看著名的 Q 库的源代码
尝试:
(function(exports) {
class MyModule {
// ...
}
exports = MyModule;
})(typeof exports === 'undefined' ? this['MyModule'] = {} : exports)
然后,如果你想发布你的 NPM 包,只需按照官方文档: https : //docs.npmjs.com/getting-started/publishing-npm-packages
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.