編寫和組織javascript插件的最佳做法是什麼？

因此，我有很多不同的JavaScript文件都是相同的代碼塊，但是由於路徑更改或其他各種條件，我偶爾需要更新它。現在複製並粘貼到新文件可以正常工作，但令人討厭執行。有沒有一種好的方法來維護一個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，但它可能是最好的選擇。

來源

2016-07-28 Anselm

這不叫「插件」，但「模塊」。 – Bergi

@Bergi謝謝澄清+1。儘管如此，我還是使用了插件這個詞來表達更一般的意義。 – Anselm

您通常會將您的共享庫和插件作爲依賴關係添加到項目的package.json文件中，並使用npm進行安裝。

CommonJS modules，它們使用module.exports對象和require函數，是目前的事實標準。

ES2015 modules，它們使用export和import語句，是一個正在出現的正式標準，但對它們的支持尚未普及。如果您的環境支持它們，它們是一個不錯的選擇。

要在前端加載任一類型的模塊，您需要使用打包程序，如Webpack或Browserify。

舊的JavaScript模塊通常發佈到全局範圍（window），並且是前端代碼的一個簡單選項。

如果你喜歡使用UMD（通用模塊定義）包裝，你也可以支持多個模塊系統。下面是如果支持，而回落至全球瀏覽器，它利用CommonJS的該UMD Github repo一個例子：

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

來源

2016-07-28 16:34:07

謝謝，但我試圖避免npm，因爲我只是想更新一個js文件，並讓代碼更新跨所有其他文件運行。基本上，我想避免告訴家屬明確更新，或者我可能只是複製並粘貼新代碼。 – Anselm

您不必在上面詳述的模塊系統中使用npm。例如，你可以通過調用'var myplugin = require（'../ plugins/myplugin'）來從'workspace/back-end-js/index.js'中'需要'在'workspace/plugins/myplugin.js'中的js文件「）;'。 –

編寫和組織javascript插件的最佳做法是什麼？

回答

相關問題