Question

所以我有一大堆代码在许多不同的javascript文件中是相同的，但我偶尔会因路径变化或其他各种条件而更新它。现在将它复制并粘贴到新文件上工作正常，但执行起来很烦人。有没有一个很好的方法来维护一个javascript文件与我的“插件”代码，并让它可以访问使用该插件的其他JavaScript文件？

我正在寻找一个好的nodejs解决方案和vanilla js解决方案。如果他们可以相互分享，那将是理想的，但不是任何方式所要求的。理想情况下，我想在workspace/中托管我的工作区并拥有一些文件夹workspace/front-end-js/和workspace/back-end-nodejs/，能够在workspace/plugins/中的插件中运行代码，以便我可以执行MyPluginVar.Foo();

之类的内容

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

-

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

Answer 1

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

使用module.exports对象和require函数的

CommonJS modules目前是事实上的标准。

使用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插件的最佳做法是什么？

1 个答案: