ES6中是否可以从外部url导入javascript模块？我尝试（使用babel节点）：
import mymodule from 'http://...mysite.../myscript.js'; // Error: Cannot find module 'http://...mysite.../myscript.js'
czfnxgou1#
2018年更新：模块加载器规范现在是ES规范的一部分--您所描述的内容在浏览器中的<script type="module">、Node.js中的自定义--loader以及Deno（如果您喜欢的话）中是允许和可能的。模块加载器规范和导入/导出语法是分开的。所以这是模块加载器的一个属性（不是ES规范的一部分）。如果你使用一个支持SystemJS这样的插件的模块加载器。
<script type="module">
--loader
jm81lzqq2#
更新于2022年，似乎它至少在最新的Chrome，Firefox和Safari浏览器中工作，只要服务器为js文件提供content-type: application/javascript; charset=utf-8的响应头。在vanilla web服务器上尝试以下两个文件：index.html
content-type: application/javascript; charset=utf-8
<!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说再见了。我现在有点太兴奋了！
2cmtqfgy3#
您还可以使用scriptjs，在我的情况下，它需要较少的配置。
var scriptjs = require('scriptjs'); scriptjs('https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.standalone.js', function() { L.mapbox.accessToken = 'MyToken'; });
qzlgjiam4#
现在，不。
有两种不同的规格：ES6定义了导出/导入的语法。还有Loader Spec，它实际上定义了如何加载这些模块。撇开规范不谈，对我们开发人员来说，重要的部分是：JavaScript Loader允许主机环境（如Node.js和浏览器）按需获取和加载模块，它提供了一个可挂钩的管道，允许前端打包解决方案（如Browserify、WebPack和jspm）挂钩到加载过程中。这种划分提供了开发人员可以在所有JavaScript环境中使用的单一格式，以及针对每个环境的单独加载机制。例如，节点加载程序将使用其自己的模块查找算法从文件系统加载其模块，而浏览器加载程序将提取模块并使用浏览器提供的打包格式。
主要目标是尽可能使此过程在节点和浏览器环境之间保持一致。例如，如果JavaScript程序希望动态地将.coffee文件转换为JavaScript，则Loader定义了一个可以使用的"translate"挂钩。这允许程序参与加载过程，即使某些细节（具体地说，从主机定义的存储中获取特定模块的过程）在不同的环境中会有所不同。所以我们依赖于宿主环境（节点、浏览器、babel等）来为我们解析/加载模块，并提供到进程的钩子。
.coffee
sgtfey8w5#
该规范描述了如何准确解析import中的 * 模块说明符 *：
import
html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier
它说URL是允许的，包括绝对和相对URL（以/，./，../开头），并且它 * 不 * 区分静态和动态导入。在文本的后面，有一个“Example”框显示了有效说明符的例子：
/
./
../
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';
z6psavjg6#
纯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);
6条答案
按热度按时间czfnxgou1#
2018年更新：模块加载器规范现在是ES规范的一部分--您所描述的内容在浏览器中的
<script type="module">、Node.js中的自定义--loader以及Deno（如果您喜欢的话）中是允许和可能的。模块加载器规范和导入/导出语法是分开的。所以这是模块加载器的一个属性（不是ES规范的一部分）。如果你使用一个支持SystemJS这样的插件的模块加载器。
jm81lzqq2#
更新于2022年，似乎它至少在最新的Chrome，Firefox和Safari浏览器中工作，只要服务器为js文件提供
content-type: application/javascript; charset=utf-8的响应头。在vanilla web服务器上尝试以下两个文件：
index.html
hello.js
这是一笔巨大的交易！因为我们现在可以和Webpack说再见了。我现在有点太兴奋了！
2cmtqfgy3#
您还可以使用scriptjs，在我的情况下，它需要较少的配置。
qzlgjiam4#
TL; DR：
现在，不。
长答案：
有两种不同的规格：ES6定义了导出/导入的语法。还有Loader Spec，它实际上定义了如何加载这些模块。
撇开规范不谈，对我们开发人员来说，重要的部分是：
JavaScript Loader允许主机环境（如Node.js和浏览器）按需获取和加载模块，它提供了一个可挂钩的管道，允许前端打包解决方案（如Browserify、WebPack和jspm）挂钩到加载过程中。
这种划分提供了开发人员可以在所有JavaScript环境中使用的单一格式，以及针对每个环境的单独加载机制。例如，节点加载程序将使用其自己的模块查找算法从文件系统加载其模块，而浏览器加载程序将提取模块并使用浏览器提供的打包格式。
主要目标是尽可能使此过程在节点和浏览器环境之间保持一致。例如，如果JavaScript程序希望动态地将
.coffee文件转换为JavaScript，则Loader定义了一个可以使用的"translate"挂钩。这允许程序参与加载过程，即使某些细节（具体地说，从主机定义的存储中获取特定模块的过程）在不同的环境中会有所不同。所以我们依赖于宿主环境（节点、浏览器、babel等）来为我们解析/加载模块，并提供到进程的钩子。
sgtfey8w5#
该规范描述了如何准确解析
import中的 * 模块说明符 *：html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier
它说URL是允许的，包括绝对和相对URL（以
/，./，../开头），并且它 * 不 * 区分静态和动态导入。在文本的后面，有一个“Example”框显示了有效说明符的例子：https://example.com/apples.mjshttp: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.jsxdata:text/javascript,export default 'grapes';z6psavjg6#
纯javascript示例如何导入谷歌代码并替换任何页面上的元素到谷歌翻译按钮（可以从浏览器调试控制台运行任何你想要的网站）