如何使用 Angular2+WebPack 导入远程 AMD 模块？答案

【问题标题】：How to import remote AMD modules with Angular2+WebPack?如何使用 Angular2+WebPack 导入远程 AMD 模块？
【发布时间】：2016-10-05 16:07:01
【问题描述】：

在我的 Angular2+TypeScript+WebPack 项目中，我想从以下 url 使用/导入 Esri ArcGIS JavaScript API：

https://js.arcgis.com/4.1/

这样import Map from 'esri/Map'; 将导入以下模块

https://js.arcgis.com/4.1/esri/Map.js

我看到人们通常使用 systemjs 来加载这些模块，但是，我不想使用 systemjs。有没有办法只用 webpack 做到这一点？

webpack.config：

var webpack = require("webpack");

module.exports = {
    entry: {
        'polyfills': './app/polyfills.js',
        'vendor': './app/vendor.js',
        'app': './app/boot.js'
    },
    output: {
        path: __dirname,
        filename: "./prod/[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {screw_ie8: true, keep_fnames: true},
            compress: {screw_ie8: true},
            comments: false
        })
    ]
};

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

webpack 是一个模块打包器，而不是一个 javascript 加载器。它从本地磁盘打包文件并且不从网络加载文件（除了它自己的块）。使用 javascript 加载器，即script.js

https://github.com/webpack/webpack/issues/150#issuecomment-32756166

还值得注意的是，您将无法从外部源加载模块，然后使用 es6 语法导入，因为远程模块需要通过 Webpack。您必须确保获取 UMD / 全局脚本。

【讨论】：

【解决方案2】：

我关注了this sample，并且能够加载 dojo、webpack、typescript 和 angular 2。

请耐心等待，进口仍然很糟糕，例如：

import * as Map from 'esri/Map';
import * as Point from 'esri/geometry/Point';
import * as Circle from 'esri/geometry/Circle';

【讨论】：