如何通过 CDN 将 ArcGIS Javascript API 与 Webpack 一起包含在 Stimulus 中？

Question

在 ArcGIS javascript api 的 quick start 指南中，它有以下示例代码：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.71511,34.09042],
        zoom: 11
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

这对于简单的网页非常有用。但是，我正在使用 Blazor（服务器端），我想将（以上）代码封装到 Blazor 组件中。所以我遇到了我的第一个绊脚石 - 我不允许在 Blazor 组件内添加 <script> 标签。那是因为控件可以随时动态创建。所以我想我应该用 Stimulus 来解决这个问题。

这是我的 Blazor 组件（到目前为止）。我有一个名为 Map.razor:

的文件

<div data-controller="map"></div>

@code {
    protected override bool ShouldRender()
    {
        var allowRefresh = false;

        return allowRefresh;
    }
}

我添加了 ShouldRender 方法，这样组件将只渲染一次（添加时）。这就是我要在我的 Stimulus 控制器中实现的目标 map-controller.js:

import { Controller } from "stimulus";

import EsriMap from "esri/Map";
import MapView from "esri/views/MapView";

export default class extends Controller {
    connect() {
        var map = new EsriMap({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: this.element,
            map: map,
            center: [-118.80500, 34.02700], // longitude, latitude
            zoom: 13
        });
    }
}

最初，我尝试添加 ArcGIS 以便使用 Webpack 构建它（这样上面的代码就可以工作）。但是，我遇到了 ArcGIS javascript api 和 tailwindcss 之间的兼容性问题。 ArcGIS 无法编译，因为调用 require('fs').

时出现问题

我没有解决 require('fs') 问题（这超出了我现有的经验），而是选择通过 CDN 引入 ArcGIS js。所以我尝试使用 Webpack 中的 external 配置功能来设置 ArcGIS。这是我的 webpack.js.config 文件：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const bundleFileName = 'holly';
const dirName = 'Holly/wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        externals: {
            'esrimap': 'esri/Map',
            'mapview': 'esri/views/MapView'
        },
        entry: ['./Holly/wwwroot/js/app.js', './Holly/wwwroot/css/styles.css'],
        output: {
            filename: bundleFileName + '.js',
            path: path.resolve(__dirname, dirName),
            libraryTarget: "umd"
        },
        module: {
            rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: bundleFileName + '.css'
            })
        ]
    };
};

这就是我在刺激控制器中所做的：

import { Controller } from "stimulus";

import EsriMap from "esrimap";
import MapView from "mapview";

export default class extends Controller {
    connect() {
        var map = new EsriMap({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: this.element,
            map: map,
            center: [-118.80500, 34.02700], // longitude, latitude
            zoom: 13
        });
    }
}

但是，我在浏览器中看到以下异常：

TypeError: esrimap__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor
    at Controller.connect (map_controller.js:14)
    at Context.connect (context.ts:35)
    at Module.connectContextForScope (module.ts:40)
    at eval (router.ts:109)
    at Array.forEach (<anonymous>)
    at Router.connectModule (router.ts:109)
    at Router.loadDefinition (router.ts:60)
    at eval (application.ts:51)
    at Array.forEach (<anonymous>)
    at Application.load (application.ts:51)

正如您可能已经猜到的那样，我正在达到我的 javascript/webpack 知识的极限。我确实对 ArcGIS javascript API 以及它是否支持 commonjs 做了一些研究。显然它使用支持 AMD 的 Dojo。所以我尝试了以下配置：

        externals: [{
            'esrimap': {
                commonjs: 'esri/Map',
                commonjs2: 'esri/Map',
                amd: 'esri/Map'
            },
            'mapview': {
                commonjs: 'esri/views/MapView',
                commonjs2: 'esri/views/MapView',
                amd: 'esri/views/MapView'
            }
        }],

但是我得到了同样的错误。我已经通读了 webpack documentation - 我不清楚我应该如何配置它。我做错了什么吗？

Answer 1

So I thought I'd address the issue with Stimulus instead.

以下是对上述短语前面问题的回答，忽略后面的所有内容。一个应该有效的替代解决方案，即使它不是您完整问题的答案。

创建专用于您的 Blazor 组件的脚本，并在您的 Pages/_host.cshtml 或 wwwroot/index.html:

中呈现或引用它

<script>
    window.myComponent = { 
      init: function(options) { 
        require([
          "esri/Map",
          "esri/views/MapView"
        ], function(Map, MapView) {

          var map = new Map({
            basemap: "topo-vector"
          });

          var view = new MapView({
            container: options.containerId,
            map: map,
            center: [-118.71511,34.09042],
            zoom: 11
          });

        }); // end require

       } // end init

     }; // end myComponent
  </script>

并通过覆盖 async Task OnAfterRenderAsync(bool isFirstRender) 在您的组件中调用此脚本。仅在 isFirstRender 设置为 true 时调用它。

您可以通过注入 IJSRuntime 并调用 await InvokeAsync("myComponent.init", "container-id")

来调用脚本

像这样（未经测试）

@inject IJSRuntime JSRuntime
<div id="@containerId" data-controller="map"></div>

@code {
    private string containerId = Guid.CreateGuid().ToString("n");
    protected override bool ShouldRender()
    {
        var allowRefresh = false;

        return allowRefresh;
    }

    protected override async Task OnAfterRenderAsync(bool isFirstRender) {
      if (isFirstRender){ 
         await JSRuntime.InvokeAsync("myComponent.init", new { containerId: containerId }) 
      }
    }
}

Answer 2

我想我应该用 Webpack 记录我的替代解决方案。 docs 指向您使用 Typescript。我想在 ES6 中使用 Webpack，这是我的 package.json 文件中的依赖项：

{
  "dependencies": {
    "postcss-import": "^12.0.1",
    "stimulus": "^1.1.1",
    "tailwindcss": "^1.1.4"
  },
  "devDependencies": {
    "@arcgis/webpack-plugin": "^4.14.0",
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.7",
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "@tailwindcss/custom-forms": "^0.2.1",
    "babel-loader": "^8.0.6",
    "cache-loader": "^4.1.0",
    "css-loader": "^3.4.1",
    "mini-css-extract-plugin": "^0.8.2",
    "postcss-loader": "^3.0.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
}

这是我的 webpack.config.js 完整文件：

const ArcGISPlugin = require("@arcgis/webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require('path');
const bundleFileName = 'holly';
const dirName = 'Holly/wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: ['./Holly/wwwroot/js/app.js', './Holly/wwwroot/css/styles.css'],
        output: {
            filename: bundleFileName + '.js',
            path: path.resolve(__dirname, dirName),
            publicPath: '/dist/'
        },
        module: {
            rules: [{
                test: /\.css$/,
                use: [
                    "cache-loader",
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: [ "cache-loader", {
                loader: 'babel-loader',
                options: {
                  presets: [
                    '@babel/preset-env'
                  ],
                  plugins: [
                    '@babel/plugin-proposal-class-properties'
                  ]
                }
              }]
            }
          ]
        },
        resolve: {
          modules: ["node_modules/"],
          extensions: [".js"]
        },
        externals: [
            (context, request, callback) => {
              if (/pe-wasm$/.test(request)) {
                return callback(null, "amd " + request);
              }
              callback();
            }
        ],
        plugins: [
            new ArcGISPlugin(),
            new MiniCssExtractPlugin({
                filename: bundleFileName + '.css'
            })
        ],
        node: {
          process: false,
          global: false,
          fs: "empty"
        }
    };
};

有几点值得注意。首先，以下解决了我原来的问题，现在记录在 @arcgis/webpack-plugin readme:

node: {
  process: false,
  global: false,
  fs: "empty"
}

有了 fs: "empty" 我可以继续下一个问题了！这是 pe-wasm - 问题在这个 issue. Which was great, because it lead me to odoe/jsapi-webpack 中定义（部分） - 一个用 ES6 编写的示例！无论如何，那是我找到以下代码的地方。我不确定它到底做了什么，但它让我继续前进：

externals: [
    (context, request, callback) => {
      if (/pe-wasm$/.test(request)) {
        return callback(null, "amd " + request);
      }
      callback();
    }
]

我还必须补充一点：

resolve: {
  modules: ["node_modules/"],
  extensions: [".js"]
}

这允许 wasm 文件找到丢失的依赖项！太棒了，因为我的代码终于编译成功了！

附带说明一下，因为我使用的是 Stimulus，所以我添加了 Babel。刺激需要 @babel/plugin-proposal-class-properties.

在运行时，我的 js 块不会加载。我偶然发现了以下解决方案：

output: {
    filename: bundleFileName + '.js',
    path: path.resolve(__dirname, dirName),
    publicPath: '/dist/'
}

我需要添加 publicPath: '/dist/' - 生成 js 块文件的子文件夹。这主要是我自己的错-我很久以前就配置了这个子文件夹，不知道有这个后果。

最后，这是我修改后的 Stimulus 控制器。我缺少对 esri 配置文件的引用：

import { Controller } from "stimulus";

import "../esri.config";

import EsriMap from "esri/Map";
import MapView from "esri/views/MapView";

export default class extends Controller {
    connect() {
        var map = new EsriMap({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: this.element,
            map: map,
            center: [-118.80500, 34.02700], // longitude, latitude
            zoom: 13
        });
    }
}

这是 docs:

中配置文件的 ES6 版本

import esriConfig from "esri/config";

const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.14/";
const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;

esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL;
esriConfig.workers.loaderConfig = {
  baseUrl: `${DEFAULT_WORKER_URL}dojo`,
  packages: [
    { name: "esri", location: DEFAULT_WORKER_URL + "esri" },
    { name: "dojo", location: DEFAULT_WORKER_URL + "dojo" },
    { name: "dojox", location: DEFAULT_WORKER_URL + "dojox" },
    { name: "dijit", location: DEFAULT_WORKER_URL + "dijit" },
    { name: "dstore", location: DEFAULT_WORKER_URL + "dstore" },
    { name: "moment", location: DEFAULT_WORKER_URL + "moment" },
    { name: "@dojo", location: DEFAULT_WORKER_URL + "@dojo" },
    {
      name: "cldrjs",
      location: DEFAULT_WORKER_URL + "cldrjs",
      main: "dist/cldr"
    },
    {
      name: "globalize",
      location: DEFAULT_WORKER_URL + "globalize",
      main: "dist/globalize"
    },
    {
      name: "maquette",
      location: DEFAULT_WORKER_URL + "maquette",
      main: "dist/maquette.umd"
    },
    {
      name: "maquette-css-transitions",
      location: DEFAULT_WORKER_URL + "maquette-css-transitions",
      main: "dist/maquette-css-transitions.umd"
    },
    {
      name: "maquette-jsx",
      location: DEFAULT_WORKER_URL + "maquette-jsx",
      main: "dist/maquette-jsx.umd"
    },
    { name: "tslib", location: DEFAULT_WORKER_URL + "tslib", main: "tslib" }
  ]
};

我认为这涵盖了一切。希望它对某人有用！

如何通过 CDN 将 ArcGIS Javascript API 与 Webpack 一起包含在 Stimulus 中？

How to include ArcGIS Javascript API via CDN with Webpack to work with Stimulus?

webpack

cdn

blazor

arcgis-js-api

stimulusjs