ES6:从URL导入模块

ES6: import module from URL

本文关键字：导入 模块 URL ES6      更新时间：2023-09-26

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

我尝试过（使用babel节点）：

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

2018更新：模块加载程序规范现在是ES规范的一部分-您所描述的内容在浏览器中的<script type="module">以及Node.js和Deno中的自定义--loader中都是允许和可能的。

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

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了。我现在有点太激动了！

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

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

TL；博士：

目前，没有。

长话短说：

有两种不同的规范：ES6定义了导出/导入的语法。Loader Spec实际上定义了如何加载这些模块。

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

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

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

（…）

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

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

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

https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a模块指定器

它说允许URL，包括绝对和相对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

纯javascript中的示例如何导入谷歌代码并将任何页面上的元素替换为谷歌翻译按钮（可以从浏览器调试控制台为您想要的任何网站运行）

importScriptURI("https://translate.google.com/translate_a/element.js"); 
document.getElementsByTagName("h1")[0].innerHTML='<div id="google_translate_element"></div>';
setTimeout(()=>{ new google.translate.TranslateElement({pageLanguage: 'en'},'google_translate_element');},1000);
相关文章：