Question

我的Angular 2应用程序中有一个Mapbox网页地图。

地图会将自身附加到<div>标记，如下所示：

<div id="map"></div>

我有两个不同的库可用于我的网络地图：Mapbox GL JS，它使用WebGL，或Mapbox.js，它不使用WebGL，并且与旧的计算机和浏览器更兼容。

当用户加载我的应用程序时，我想测试他们的浏览器是否可以使用WebGL库。（Example here from Mapbox documentation.）

如果他们支持它，我想加载Mapbox GL JS库。

如果他们不支持，我想加载Mapbox.js作为后备。

（Vanilla Javascript example of this behavior here.）

我想这样做而不加载两个库。我只想加载一个库或另一个库，以及我编写的所有相关代码。（每个库都有自己不同的语法/格式，因此我不能为这两个库重用相同的关联代码。）

您认为使用Webpack模块捆绑包在Angular 2应用程序中执行此操作的最佳策略是什么？

注意：在这种情况下，我无法使用路由器分隔两个不同的地图;否则这可能会容易得多....

Answer 1

一个好的解决方案（对于Webpack）是使用System.import或require.ensure，如本答案中所述：https://stackoverflow.com/a/34489991/3403895

System.import方法：

export class MyAppComponent {
  constructor(){
    System.import('path/to/your/module').then(refToLoadedModule => {
      refToLoadedModule.someFunction();
    }
  );
}

require.ensure方法：

export class MyAppComponent {
  constructor() {
     require.ensure(['path/to/your/module'], require => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     }); 
  }
}

此链接似乎也是一个很好的教程：Code Splitting in Angular 2 with Webpack 2 (http://blog.waffle.io/code-splitting-angular-2-webpack-2/)

非常感谢Harangue和ymz

使用Angular 2 / Webpack延迟加载库/依赖关系而不使用路由器

1 个答案: