webpackアプリでamdモジュール（arcgis）を参照しています

Question

私はwebpackで反応するアプリを構築しています。反応成分にarcgis mapsを組み込む必要があります。私はこれを自分のプロジェクトにどのように持ち込むのかを知っています。私は、構築されたJavaScriptのindex.jsとarcgisディレクトリを作成しようと、それを参照しようとしました：

動作しません

import {Map} from 'arcgis/index' 

。私はちょうど私のindex.htmlに直接CSS/JSのスクリプトタグを入れようとしましたが、私がrequireにしようとすると、例のように、webpackは明らかにそれらを見つけることができません。私のsrcファイルでrequire呼び出しを無視するようにwebpackに指示する方法はありますか？私は次のことを試して失敗しています：

import React from 'react' 

export default class EsriMap extends React.Component { 
    componentDidMount() { 
     const _this = this 

     require(["esri/map", "dojo/domReady!"], function(Map) { 
      var map = new Map(_this.refs.map, { 
      center: [-118, 34.5], 
      zoom: 8, 
      basemap: "topo" 
      }); 
     }); 
    } 

    render() { 
     return (
      <div ref="map"></div> 
     ) 
    } 
} 

Answer 1

私はあなたがesrijsapiのバウアーバージョンを使ってみることができると思います。 Doc link

Answer 2

お試しください。https://github.com/tomwayson/esri-webpack-babel

この方法は、ビルドを駄目にしないので、いい方法です。 CDRIからESRI Apiを読み込み、それが外部であることをwebpackに伝えます。

//Add this... 
externals: [ 
// Excludes any esri or dojo modules from the bundle. 
// These are included in the ArcGIS API for JavaScript, 
// and its Dojo loader will pull them from its own build output 
    function (context, request, callback) { 
    if (/^dojo/.test(request) || 
     /^dojox/.test(request) || 
     /^dijit/.test(request) || 
     /^esri/.test(request) 
    ) { 
     return callback(null, "amd " + request); 
    } 
    callback(); 
    } 
], 
//And this to you output config 
output: { 
    libraryTarget: "amd" 
}, 

アプリがブートストラップすると、スクリプトタグでDojoを使用してWebpackモジュールがブートストラップされます。

<!-- 1. Configure and load ESRI libraries --> 
<script> 
    window.dojoConfig = { 
     async: true 
    }; 
</script> 
<script src="https://js.arcgis.com/4.1/"></script> 

<!-- Load webpack bundles--> 
<script> 
    require(["Angular/dist/polyfills.bundle.js", "Angular/dist/vendor.bundle.js", "Angular/dist/app.bundle.js"], function (polyfills, vendor, main) { }); 
</script> 

私が取り組んでいるAngular 2 Appで動作しています。唯一の欠点は、カルマを使ってすぐに実行するユニットテストがまだできていないことです。私は数時間しか作業していません。すぐにテスト問題への解決策を期待してください。

Answer 3

@ getfuzzyの回答は、ArcGIS APIを遅延ロードする必要がない場合（たとえば、/mapルート上でのみ）、うまく機能します。あなたはthis answer

このblog postで私が説明するアプローチを取ることになるでしょうそのために

は、これら2つのアプローチのいずれかを使用する必要がある理由を説明し、彼らはそれぞれの長所/短所だけでなく、どのように動作するかを説明します。