为什么我无法在我的 react 应用程序中通过 CDN 使用包？答案

【问题标题】：Why am I unable to use packages via CDN in my react app?为什么我无法在我的 react 应用程序中通过 CDN 使用包？
【发布时间】：2019-04-15 22:57:15
【问题描述】：

我目前正在尝试使用传单设置地图以做出反应。我在 jsfiddle 中设置了我的地图组件和应用程序组件，一切正常（https://jsfiddle.net/myulz/8Lg4qpmf/36/ )，但是当我尝试在本地运行一个非常相似的项目（组件文件夹中的 MapContainer 和项目根目录中的主 App 组件）时，似乎我的任何 cdn 包都没有被加载，因为我收到此错误：

Failed to compile.

./src/components/MapContainer.js
  Line 7:   'L' is not defined         no-undef
  Line 8:   'L' is not defined         no-undef
  Line 16:  'L' is not defined         no-undef
  Line 22:  'L' is not defined         no-undef
  Line 23:  'L' is not defined         no-undef
  Line 24:  'L' is not defined         no-undef
  Line 29:  'FreeDraw' is not defined  no-undef
  Line 29:  'FreeDraw' is not defined  no-undef

这些软件包在 jsfiddle 上运行良好但在本地运行不正常有什么原因吗？

public/index.html *使用 react-router 所以我的应用组件被设置为一个路由并且路由被发送到#root

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.web.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import React, { Component } from 'react';
import './App.css';
import MapContainer from './components/MapContainer'



class App extends React.Component {
  constructor(props) {
    super(props)

  }

  render() {
    return (
      <div>
        <MapContainer/>
      </div>
    )
  }
}

export default App;

import React from 'react';
import '../style.css';

class MapContainer extends React.Component {
  componentDidMount() {
      // create map
      var map = L.map('map', {
          center: new L.LatLng(38.898584, -77.020940),
          zoom: 10,
          maxBounds: bounds,
          minZoom: 4
      });

      var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(osmUrl, {
          minZoom: 0,
          maxZoom: 18,
          attribution: osmAttrib
      });

      var bounds = L.latLngBounds(
             L.latLng(5.499550, -167.276413), //Southwest
             L.latLng(83.162102, -52.233040)  //Northeast
         );


      map.addLayer(osm);
      const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
            map.addLayer(freeDraw);

    }

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

export default MapContainer;

【问题讨论】：

标签： reactjs leaflet cdn

【解决方案1】：

您应该使用window.L 和window.FreeDraw 而不是L 和FreeDraw

【讨论】：

我尝试了window.onload = function (){ ReactDOM.render(routing, document.getElementById('root'))}（因为我使用反应路由器来呈现 App/blah 和其他一些页面）但仍然是同样的错误。我仍然感谢您的快速响应！
好的，尝试调用位于 CDN 的资源，例如 window.L 和 window.FreeDraw，而不是 L 和 FreeDraw