Как импортировать удаленные модули AMD с Angular2+WebPack?

В моем проекте Angular2+TypeScript+WebPack я хотел бы использовать / импортировать ESRI ArcGIS JavaScript API из следующего url:

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

чтобы a import Map from 'esri/Map';импортировал следующий модуль

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

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

webpack.конфиг:

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
        })
    ]
};

2 ответа

  1. webpack — это модуль bundler, а не javascript-загрузчик. Он упаковывает файлы с локального диска и не загружает файлы из интернета (за исключением собственных фрагментов). Используйте загрузчик javascript, т. е. скрипт.js

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

    Также стоит отметить, что вы не сможете загрузить модуль из внешнего источника, а затем импортировать с помощью синтаксиса es6, поскольку удаленный модуль должен пройти через Webpack. Вы должны будете убедиться, что вы получаете UMD / global script.

  2. Я следовал этому образцу и смог загрузить 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';