Javascript 传单在通过CDN而非npm pakcage使用时呈现Windy地图

我正在通过CDN使用in-React，它工作正常：

在index.js中：

反应组分：

export const renderMap=（）：void=>{
常量选项={
键：“xyz”，
拉丁美洲：41.3，
lon:2.1，
缩放：10，
};
//eslint禁用下一行@typescript eslint/无显式任何
（如有窗口）。windyInit（选项，（windyAPI:any）=>{
const{map}=windyAPI；
//eslint禁用下一行@typescript eslint/无显式任何
（如有窗口）。L.弹出窗口（）
.setLatLng（[41.3,2.1]）
.setContent（“：）”）
.openOn（地图）；
});
};

然而，我希望能够使用传单npm包，而不是CDN。导入包时，它已定义，但Windy会抛出错误：

libBoot.js:3传单库丢失

在index.js中：

反应组分：

从“传单”导入L；
导出常量renderMap=（）：void=>{
console.log（'L'，L）；//已定义-对象存在
常量选项={
键：“xyz”，
拉丁美洲：41.3，
lon:2.1，
缩放：10，
};
//eslint禁用下一行@typescript eslint/无显式任何
（如有窗口）。windyInit（选项，（windyAPI:any）=>{
const{map}=windyAPI；
L.弹出窗口（）
.setLatLng（[41.3,2.1]）
.setContent（“：）”）
.openOn（地图）；
});
};

关于在线设置的信息很少，因为Windy遵从传单，传单遵从Windy。传单快速入门指南或其github中没有任何信息

使用“传单库丢失”错误的正确方法是什么？原因很简单，是这些JS库的加载顺序：

在脚本开头加载传单库，然后从URL

https://api.windy.com/assets/map-forecast/libBoot.js

• 当您在HTML页面中显式地编写
  标记（通过CDN加载它们）时，首先正确地加载传单，然后是Windy
• 但是当你导入传单时，webpack（当你使用React时，它是默认的构建引擎）会将它与你的应用程序代码捆绑在一起，默认情况下，它会将
  标签插入HTML页面的
  最后一个位置，从而使它在Windy之后加载（然后抛出错误消息）
• 当您重新引入
  标签以从

  节点模块

  文件夹加载传单时，我想您应该先将其放回（即，在Windy标签之前）；但是，这只在开发中起作用，因为

  node\u modules

  文件夹在生产中不可用

如果Windy library可以从本地文件（或npm包）而不是从其URL（/CDN）加载，那么最简单的解决方案就是：在这种情况下，您只需在传单之后导入Windy library，webpack就会按此顺序将其打包

然而，Windy可能会根据其位置本身执行一些魔术，例如加载CSS：

传单CSS将自动加载

虽然可以解决CSS的这种行为，但它也可能为其他东西（例如访问其数据和层）带来一些魔力

因此，如果我们假设我们必须从CDN加载Windy，但是（无论出于何种原因），我们绝对准备好仍然要从npm加载传单（而不是从CDN加载传单，我们知道CDN工作良好且容易），那么我们必须找到一种方法以某种方式强制Web包加载顺序

我们现在显然已经脱离了webpack的主要用例，因为在这种特定情况下，我们仍然希望将传单捆绑在一起，但从URL和传单之后加载Windy，但显然是在我们的应用程序代码之前

我至少看到了两种可能的（显然是黑客的）解决方案：

• 在我们的应用程序代码中动态生成Windy的
  标签；这样可以确保它在传单之后加载；但我们必须延迟应用程序中依赖Windy的部分的执行（例如，将其包装在

  setTimeout

  中，最好检查Windy现在是否可用，因为其加载延迟可能会有所不同）
• 使用一些webpack插件在我们的代码中导入Windy，但是webpack实际上仍然从URL加载：例如，使用特定配置来指定URL；不确定是否仍然有正确的加载顺序，因为它可能无法识别对传单的依赖性

尽管如此，在这种情况下，我们可能仍然怀疑是否需要从npm加载传单（因为在Windy之前从CDN加载传单是轻而易举的事）

---

考虑到Windy需要对

any

进行的强制转换，我发现您实际上使用了TypeScript。因此，您可能希望提供活页打字，当您导入活页打字时（并且安装了活页打字），活页打字几乎是自然而然的，这给您的印象是，必须从npm加载活页打字才能工作。在这种情况下，我们可以利用以下事实：类型和实际运行时代码是两个独立的东西。在这种情况下，您仍然可以

导入代码中的

传单，并从其类型中获益，但请指示webpack不要将其捆绑；您将使其在外部可用，通常是因为您从CDN加载。请参阅webpack的externals选项。这样，您就可以两全其美：您可以在Windy之前按自己的方式加载传单，并且仍然可以打印传单。

请尝试在cdn上使用最新版本的传单。

，是否有效？谢谢@FalkeDesign good point。实际上，它不工作，并抛出一个错误，表示v1.4.x是必需的。我尝试了v1.4.0，但出现了最初的错误。