動態加載腳本（angularJs）

Question

我的angularjs應用程序中有一些庫和依賴項，我只想用一個腳本加載所有這些，因為我有三個應用程序都使用了此依賴項。 其實我有這個自定義腳本：

var initDependencies = {

  _dependencies: [
    '/path/to/jquery.js', '/path/to/angular.js', 'path/to/bootstrap.js', ...];
  ],

  _currentFolder: '/' + window.location.pathname.split('/')[1],

/**
 * Constructor
 */
  init: function() {
    initDependencies.createDependencies();
  },

/**
 * Retorna el folder actual
 */
  getCurrentFolder : function() {
    return initDependencies._currentFolder;
  },

/**
 * Retorna el array de dependencia
 */
  getDependencies: function() {
    return initDependencies._dependencies; 
  },

/**
 * Crea un nuevo tag <script> con su correspondiente src
 * @param {*} src 
 */
  createNewDependencie : function(src) {
    var myScript = document.createElement("script");
    myScript.type = "text/javascript";
    myScript.src = src;
    console.log('myScript :', myScript);
    document.body.appendChild(myScript);
  },

/**
 * Crea todas las dependencias
 */
  createDependencies: function() {
    for (var dependencie in initDependencies.getDependencies()) {
        var src = this.getCurrentFolder() + initDependencies.getDependencies()[dependencie];
        initDependencies.createNewDependencie(src);
    }
  }
}

document.addEventListener("DOMContentLoaded",initDependencies.init);

但是我在我的dependencies數組中存在另一個依賴項錯誤，實際上我有很多類型錯誤：

Uncaught TypeError: Cannot read property 'module' of undefined （我想angular變量未定義）。

如何動態加載依賴項和庫？

Answer 1

這些事情通常是通過任務運行器為特定目標預先構建來完成的。 Grunt或Gulp易於拾取，可在NodeJS上運行，易於安裝，值得花一兩個小時根據環境或目標部署來設置構建過程。 這使您可以擁有越來越少的JS代碼文件。

如果您想忽略構建器，可以自己編寫代碼，NodeJS也具有內置函數來處理您在上面編寫的大部分內容。

請記住，如果您在瀏覽器中執行內容，則它無權處理OS的文件系統等。另一方面，NodeJS將會擁有並且將允許您預構建所有想要的東西。

這可能更簡單，更快捷，因為您可以立即將所有您需要的js文件進行丑化，縮小和加載，而不是稍后在用戶等待某些結果時加載它們，並且您正在加載MB的庫。那一刻，才發出請求。

依賴關系生態系統還可以為您跟蹤版本（如果您將NPM與NodeJS一起使用），隨着時間的流逝，當依賴於維護依賴關系時，這將是一個巨大的好處。

設置完成后，您可以從文件中復制正確配置的依賴文件npm init，運行builder for specific environment選項，然后您可以使用舊文件系統中的文件系統組織在10秒內設置一個新應用，並設置一些區別。 它還允許您以一種更實用的方式存儲所有內容（涉及版本控制）。 您不想在存儲庫中構建用於構建最終應用程序的1000個依賴文件，而希望在2個純文本文件中具有npm和構建器配置。

我希望這鼓勵了您研究它，因為我相信在任何嚴肅的項目中，這都是要走的路，而不是您要嘗試的路。

我會在評論中放這個，但是太長了，聲明“使用構建器來處理它”聽起來像什么都沒解釋。