如何普遍导出NPM模块(用于浏览器)？

Question

我写了一个NPM模块.让我们说这是它:

class MyModule {
    // bla bla
};

我想以MyModule 通用方式导出,因此人们可以在浏览器中以3种最常用的方法导入它:

1. 使用ES6进口:

   // If a transpiler is configured (like Traceur Compiler, Babel, Rollup or Webpack):
   import MyModule from 'my-npm-module';
   

2. 使用CommonJS Imports

   // If a module loader is configured (like RequireJS, Browserify or Neuter):
   const MyModule = require('my-npm-module');
   

3. 只需在HTML中引用脚本文件:

   <script ="/node_modules/my-npm-module/index.js">
   <script>
       const module = new MyModule();
   </script>
   

我怎样才能做到这一点？我应该如何出口我的MyModule？

Answer 1

您正在寻找的是通用模块定义（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的核心中。