ES6:从 URL 导入module

IT技术 javascript ecmascript-6 es6-modules es6-module-loader
2021-01-16 08:31:12

是否可以从 ES6 中的外部 url 导入 javascript module?

我试过(使用 babel-node):

import mymodule from 'http://...mysite.../myscript.js';
// Error: Cannot find module 'http://...mysite.../myscript.js'
4个回答

2018 年更新:module加载器规范现在是 ES 规范的一部分——你所描述的内容<script type="module">在浏览器中是允许和可能的,并且可以--loader使用 Node.js 以及 Deno(如果你喜欢的话)。


module加载器规范和导入/导出语法是分开的。所以这是module加载器的一个属性(不是 ES 规范的一部分)。如果您使用支持SystemJS 等插件的module加载器

等等,import语法不是ES6 中的原生module加载器吗?
2021-03-19 08:31:12
Browserify 插件:browserify-cdnjs
2021-03-22 08:31:12
@slebetman Chrome 和 Firefox 在一个标志下支持它。该规范由github.com/ModuleLoader/es6-module-loader(systemjs 的一个子集)填充。调用的文件System.register可能会工作 - 其他文件目前可能不会。还有script type='module'用于在浏览器中编写module代码。这主要是猜测。
2021-04-04 08:31:12
@slebetman 指定加载module的语法(即importexport语法)并指定如何加载它是两个独立的任务 - 例如,浏览器和 node.js 将使用不同的机制 - 所以它不能成为语言的一部分. 一般来说 - 与环境交互不是规范感兴趣的任务。
2021-04-06 08:31:12
正确,底层机制可能不同,但导入语法应该是导入module吧?显然,我们目前没有本地运行的语法示例,但可能在未来的某个时候浏览器会支持它。
2021-04-08 08:31:12

您还可以使用scriptjs,在我的情况下,它需要较少的配置。

var scriptjs = require('scriptjs');

scriptjs('https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.standalone.js', function() {
    L.mapbox.accessToken = 'MyToken';
});

特尔;博士:

目前,没有

长答案:

有两种不同的规范:ES6 定义了导出/导入的语法。还有Loader Spec实际上定义这个module将如何加载。

撇开规范不谈,对我们开发人员来说,重要的部分是:

JavaScript 加载器允许主机环境(如 Node.js 和浏览器)按需获取和加载module。它提供了一个可挂钩的管道,以允许 Browserify、WebPack 和 jspm 等前端打包解决方案挂钩到加载过程中。

这种划分提供了开发人员可以在所有 JavaScript 环境中使用的单一格式,并为每个环境提供了单独的加载机制。例如,节点加载器会使用自己的module查找算法从文件系统加载其module,而浏览器加载器会获取module并使用浏览器提供的打包格式。

(...)

主要目标是使 Node 和浏览器环境之间的此过程尽可能多地保持一致。例如,如果一个 JavaScript 程序想要动态地将.coffee文件翻译成 JavaScript,Loader 定义了一个可以使用的“翻译”钩子。这允许程序参与加载过程,即使某些细节(特别是从其主机定义的存储中获取特定module的过程)在环境之间会有所不同。

所以我们依赖宿主环境(节点、浏览器、babel 等)来为我们解析/加载module并为进程提供钩子。

此答案:“否”在 2018/2019 中无效
2021-03-22 08:31:12

该规范描述了如何准确module符import得到解决:

https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier

它说的网址被允许,绝对和相对的人(从/./../),它并没有静态和动态的进口区分。进一步在文本中,有一个“示例”框显示有效说明符的示例:

  • https://example.com/apples.mjs
  • http:example.com\pears.js (becomes http://example.com/pears.js as step 1 parses with no base URL)
  • //example.com/bananas
  • ./strawberries.mjs.cgi
  • ../lychees
  • /limes.jsx
  • data:text/javascript,export default 'grapes';
  • blob:https://whatwg.org/d0360e2f-caee-469f-9a2f-87d5b0456f6f