如何通用導出 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 導入

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

3. 只需引用 HTML 中的腳本文件：

<script src="/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 的核心了。

Answer 2

只是來自自耕農的一個例子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 庫的源代碼

Answer 3

嘗試：

(function(exports) {
    class MyModule {
       // ...
    }

    exports = MyModule;
})(typeof exports === 'undefined' ? this['MyModule'] = {} : exports)

然后，如果你想發布你的 NPM 包，只需按照官方文檔： https : //docs.npmjs.com/getting-started/publishing-npm-packages