Динамически загружать скрипты (angularJs) - PullRequest
0 голосов
/ 03 декабря 2018

У меня есть несколько библиотек и зависимостей в моем приложении 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 переменная не определена).

Как я могу динамически загружать свои зависимости и библиотеки?

1 Ответ

0 голосов
/ 03 декабря 2018

Эти вещи обычно выполняются путем предварительной сборки конкретной цели с помощью исполнителей задач. Grunt или Gulp легко подобрать, запустить на NodeJS, который прост в настройке и стоит потратить час или два на настройку процесса строительства в зависимости от среды или целиразвернуть.Это позволяет вам иметь все меньше и меньше файлов JS-кода.

NodeJS также имеет встроенные функции для обработки большей части того, что вы написали выше, если вы хотите игнорировать компоновщики, вы можете написать код самостоятельно.

Помните, что если вы выполняете какие-либо действия в браузере, у него нет разрешений на многое с файловой системой ОС и т. Д. NodeJS, с другой стороны, будет иметь и позволит вам предварительно собрать все, что вы хотите.

Это может быть намного проще и быстрее, поскольку вы можете сразу же увеличить, уменьшить и загрузить все js-файлы, которые вам когда-либо понадобятся, вместо того, чтобы загружать их позже, пока пользователь ожидает некоторого результата, а вы загружаетепару МБ библиотек в тот момент и только потом отправляют запрос.

Экосистема зависимостей также отслеживает версии для вас (если вы используете NPM с NodeJS), что со временем станет огромным преимуществом, когда оно придетвплоть до поддержки ваших зависимостей.

После настройки вы можете скопировать правильно сконфигурированный файл зависимостей, npm init из него, запустить сборщик для определенной среды и вуаля, через 10 секунд вы настроите новое приложение, используя организацию файловой системы.от старого и настраивая несколько различий.Это также позволяет вам хранить все это более удобным способом, когда дело доходит до управления версиями.Вы не хотите иметь 1000 файлов зависимостей, которые собирают ваше окончательное приложение в репозитории, вы хотите иметь конфигурацию npm и сборщика в 2 файлах с простым текстом.

Я надеюсь, что это побудило вас взглянуть на него с тех пор, как яповерьте в любой серьезный проект, это путь, а не тот, который вы пытаетесь выбрать.

Я бы поставил это в комментарии, но он слишком длинный, и указание «использовать компоновщик для обработки этого» будетзвучит как ничего не объясняя.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...