70

是否可以在 ES6 中从外部 url 导入 javascript 模块？

我试过（使用 babel-node）：

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

5 回答 5

39

2018 年更新：模块加载器规范现在是 ES 规范的一部分——您所描述的内容<script type="module">在浏览器中以及--loader使用 Node.js 以及 Deno 的自定义中是允许和可能的，如果您对此感兴趣的话。

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

于 2016-01-05T08:43:38.390 回答
6

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

var scriptjs = require('scriptjs');

scriptjs('https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.standalone.js', function() {
    L.mapbox.accessToken = 'MyToken';
});
于 2017-01-06T11:45:38.937 回答
5

TL;博士：

目前，没有。

长答案：

有两种不同的规范：ES6 定义了导出/导入的语法。还有一个加载器规范，它实际上定义了这个模块将如何加载。

抛开规范不谈，对我们开发人员来说重要的部分是：

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

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

(...)

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

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

于 2016-03-23T12:45:07.203 回答
3

2022 年更新，目前看来至少在最新的 Chrome、Firefox 和 Safari 中有效，只要服务器为content-type: application/javascript; charset=utf-8js 文件提供响应头。

用 vanilla web 服务器试试这两个文件：

索引.html

<!DOCTYPE html>
<html lang="en-US">
<head>
   <meta charset="utf-8">
   <title>Hello World</title>
   <script type="module" src="./hello.js"></script>
</head>
<body>
</body>
</html>

你好.js

import ip6 from 'https://cdn.jsdelivr.net/gh/elgs/ip6/ip6.js';

const el = document.createElement('h1');
const words = "::1";
const text = document.createTextNode(ip6.normalize(words));
el.appendChild(text);

document.body.appendChild(el);

这是一个巨大的交易！因为我们现在可以和 Webpack 说再见了。我现在有点太兴奋了！

于 2022-01-18T03:38:17.883 回答
1

该规范描述了如何准确解析模块说明符：import

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

它说URL 是允许的，包括绝对的和相对的（以/, ./,开头../），并且它不区分静态和动态导入。在正文中，有一个“示例”框显示了有效说明符的示例：

  • 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
于 2021-09-02T22:32:39.873 回答