javascript - 如果不需要或导入 js 库，则公开它的最佳方法

Question

我正在创建一个与动画 Canvas 库一起使用的小库。这些人中的大多数不使用 requireJS、webpack 或其中任何一个。

如果在 html 中直接引用该文件，向全局公开的最佳方式是什么？

class MyLibClass {
    constructor() {
        // ...
    }
}

if (???) {
    // The user is importing or requiring it
    export default MyLibClass;
} else {
    // Expose to the global scope
     window.MyLibClass = MyLibClass;
}

Answer 1

这是一种方法，基本上的想法是检测环境是否提供任何导出库的方法，如果全部失败，则回退到单个全局变量。

(function (factory) {
    if (typeof define === "function" && define.amd) {
        define(factory);
    } else if (typeof module != "undefined" && typeof module.exports != "undefined") {
        module.exports = factory();
    } else if (typeof Package !== "undefined") {
        MyLib= factory();  // export for Meteor.js
    } else {
        /* jshint sub:true */
        window["MyLib"] = factory();
    }
}(function () {
    ...
    return myLib;
}));

请注意，它是用 ES5 编写的，而不是 ES6，但它应该很容易回收，支持的导出方法是 AMD、RequireJS(和 ES6+)、Meteor.js 和浏览器。