【问题标题】:Is it possible to require or import resource from cdn in javascript or es6 [closed]是否可以在javascript或es6中从cdn要求或导入资源[关闭]
【发布时间】:2021-04-19 11:42:02
【问题描述】:

使用 svelte 编译器从合成文件(字符串)生成代码。它的输出也是一个字符串,但它添加了来自 svelte 本身的导入语句。我需要从生成的代码中删除所有这些导入语句,但我还需要获取这些导入语句并以我可以从 cdn 导入/需要的方式添加它们。

我打算将这些导入语句解析为:

import { SvelteComponent, append, etc. } from "svelte/internal";

并用类似的东西替换它:

const { SvelteComponent, append, etc. } = svelte.internal;

我最初的想法是我是否可以将代码内联添加到 js 模块中,以从纯 js / es6 的 cdn 导入/要求脚本(在本例中为 svelte)。该项目是用反应编写的,我已经编写了自己的用于动态加载脚本的钩子,但我认为需要将其添加到 iframe 的窗口中。但是回想一下模块是如何工作的,我相信将脚本添加到父窗口也可以。所以我的问题是,如何将脚本从 cdn 导入到我的 javascript 模块中?

【问题讨论】:

标签: javascript ecmascript-6 es6-modules


【解决方案1】:

答案取决于宿主环境。对于浏览器,答案是肯定的(假设您正在导入的资源与正在导入的资源兼容)。 (相比之下,对于 Node.js,答案是否定的,至少目前是这样。)这两种环境中的模块说明符都可以是完整的 URL。请注意,通过import 加载的模块脚本受同源策略的约束,因此另一端必须为它们提供适当的 CORS 标头以允许您的站点使用它们。 (CDN 通常会这样做。)

这是一个浏览器示例,导入 Vue.js 的 JavaScript 模块版本:

<script type="module">
import {version} from "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.esm-browser.js";
console.log(version);
</script>

【讨论】:

  • 谢谢 T.J.它适用于我正在制作的在线代码编辑器,因此环境将是浏览器。你有我可以提供更多信息的示例或链接吗?
  • @cbutler - Web 平台的模块说明符由 HTML 规范定义,this section 可能是最好的查看位置。 MDN's page on import 对于一般上下文很有用。
  • 再次感谢。需要明确的是,这个 sn-p 是用标记而不是 javascript 文件编写的,对吗?我想我需要编辑我的问题,因为它已经关闭。但我可以澄清我的用例并更具体。我会更新的,我只是想避免过于复杂
  • @cbutler - Stack Snippets 编辑器的 JavaScript 面板添加了一个没有 type="module"script 标记。但是你只能在模块中使用import。这就是为什么我在编辑器的 HTML 面板中明确编写了 script 标记。但是脚本标签内的所有内容都是 JavaScript(现代,模块 JavaScriot)。
  • 啊,好吧,所以我可以用完整的 url 从“svelte/internal”替换?太容易了!谢谢T.J.!我会测试一下。顺便说一句,我需要这个的原因是能够在我正在制作的代码编辑器中支持 svelte。如果你喜欢,请查看:) contrived-dev.herokuapp.com
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-02-26
  • 1970-01-01
  • 1970-01-01
  • 2015-03-27
  • 2016-09-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多