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，运行特定环境的构建器选项，然后您就可以在10秒钟内使用旧系统中的文件系统组织设置新应用程序并进行一些设置的差异。它还允许您以一种更实用的方式存储所有内容（涉及版本控制）。您不想在存储库中构建用于构建最终应用程序的1000个依赖文件，而希望在2个纯文本文件中具有npm和构建器配置。

我希望这会鼓励您去研究它，因为我相信这是一个严肃的项目，而不是您尝试的项目。

我本来会在评论中放这个，但是太长了，声明“使用构建器来处理”似乎听起来什么也没解释。

动态加载脚本（angularJs）

1 个答案: