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

Question

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

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

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

--

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

Answer 1

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

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

使用 export 和 import 语句的

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

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

较旧的 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 () {};
}));

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

What are the best practices for writing and organizing javascript plugins?

javascript

node.js

plugins

organization