ES6：从 URL 导入模块

Question

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

我试过了（使用 babel-node）：

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

Answer 1

2018 更新：模块加载器规范现在是 ES 规范的一部分 - 您所描述的内容在浏览器中 <script type="module"> 以及自定义 --loader 和 [=19] 是允许和可能的=] 以及 Deno，如果你喜欢的话。

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

Answer 2

长话短说：

目前，没有。

长答案：

有两种不同的规范：ES6 将语法定义为 exporting/importing。还有 Loader Spec 实际上定义了如何这个模块将加载。

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

The JavaScript Loader allows host environments, like Node.js and browsers, to fetch and load modules on demand. It provides a hookable pipeline, to allow front-end packaging solutions like Browserify, WebPack and jspm to hook into the loading process.

This division provides a single format that developers can use in all JavaScript environments, and a separate loading mechanism for each environment. For example, a Node Loader would load its modules from the file system, using its own module lookup algorithm, while a Browser Loader would fetch modules and use browser-supplied packaging formats.

(...)

The primary goal is to make as much of this process as possible consistent between Node and Browser environments. For example, if a JavaScript program wants to translate .coffee files to JavaScript on the fly, the Loader defines a "translate" hook that can be used. This allows programs to participate in the loading process, even though some details (specifically, the process of getting a particular module from its host-defined storage) will be different between environments.

所以我们依赖主机环境（节点、浏览器、babel 等）为我们 resolve/load 模块并提供进程挂钩。

Answer 3

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

var scriptjs = require('scriptjs');

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

Answer 4

规范描述了 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

Answer 5

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

使用普通网络服务器尝试这两个文件：

index.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>

hello.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 说再见了。我现在有点太兴奋了！

ES6：从 URL 导入模块

ES6: import module from URL

javascript

ecmascript-6

es6-module-loader

es6-modules

长话短说：

长答案：