javascript - 编写和组织 JavaScript 插件的最佳实践是什么？

Question

所以我有一段很好的代码，在许多不同的 javascript 文件中都是相同的，但由于路径更改或其他各种情况，我偶尔不得不更新它。现在将其全部复制并粘贴到新文件中可以正常工作，但执行起来很烦人。有没有一种好方法可以用我的“插件”代码维护一个 javascript 文件，并让使用该插件的其他 javascript 文件可以访问它？

我正在寻找一个好的 nodejs 解决方案和 vanilla js 解决方案。如果它们可以相互共享，那将是理想的，但无论如何都不需要。理想情况下，我想在 workspace/ 中托管我的工作区并有一些文件夹，workspace/front-end-js/ 和 workspace/back-end- nodejs/，能够从 workspace/plugins/ 中的插件运行代码，这样我就可以执行类似 MyPluginVar.Foo();

我知道一些系统，比如 Node 的 var foo = require('bar'); 和前端浏览器版本，但真的不知道我的所有选择。编写和组织 JavaScript 插件的最佳方式是什么？

--

编辑:我真的想避免使用 npm，但这可能是最好的选择。

Answer 1

您通常将共享库和插件作为依赖项添加到项目的 package.json 文件中，并使用 npm 安装它们。

CommonJS modules ，它使用module.exports对象和require函数，是目前事实上的标准。

ES2015 modules ，它使用 export 和 import 语句，是一种新兴的正式标准，但对它们的支持尚未普遍。如果您的环境支持它们，它们是一个不错的选择。

要在前端加载任一类型的模块，您需要使用 Webpack 或 Browserify 等 bundler 。

较旧的 javascript 模块通常发布到全局范围 (window)，并且是前端代码的简单选项。

如果您愿意，您还可以通过使用 UMD(通用模块定义)包装器来支持多个模块系统。这是来自 UMD Github repo 的示例在支持的情况下利用 CommonJS，同时回退到浏览器全局:

(function (root, factory) {
    if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('b'));
    } else {
        // Browser globals
        factory((root.commonJsStrictGlobal = {}), root.b);
    }
}(this, function (exports, b) {
    // b represents some dependency

    // attach properties to the exports object to define
    // the exported module properties.
    exports.action = function () {};
}));