摘要：浏览器问题执行多次模块。浏览器问题加载页面失败加载没有的模块脚本。您可以通过添加属性来向同源模块添加凭据这对我来说似乎有点奇怪，我在规范中对此提出质疑。浏览器问题使用凭据请求同源模块。已在中修复默认请求同源模块的时候携带了凭据。
原文链接：ECMAScript modules in browsers作者：Jake Archibald
浏览器现在可以使用 ES 模块（module）了！它们是：
Safari 10.1
Chrome 61
Firefox 60
Microsoft Edge 16
// utils.mjs
export function addTextToBody(text) {
const div = document.createElement("div");
div.textContent = text;
document.body.appendChild(div);
}
在线演示
您只需要在 script 元素上添加 type=module，浏览器就会将内联脚本或外部脚本作为 ECMAScript module 处理。
关于模块（module）已经有一些很棒的文章，但是我想分享一些在我测试和阅读规范的时候学到的浏览器特有的内容。
目前还不支持的某些 import 用法// 已支持:
import {foo} from "https://jakearchibald.com/utils/bar.mjs";
import {foo} from "/utils/bar.mjs";
import {foo} from "./bar.mjs";
import {foo} from "../bar.mjs";
// 不支持:
import {foo} from "bar.mjs";
import {foo} from "utils/bar.mjs";
有效的模块路径说明符必须符合下列条件之一：
一个完整的非相对URL，这样在将其传给 new URL(moduleSpecifier) 的时候才不会报错。
以 / 开头的。
以 ./ 开头的。
以 ../ 开头的。
其他形式的说明符保留供将来使用，例如导入内置模块。
使用 nomodule 来向后兼容在线演示
支持 type=module 的浏览器会忽略属性为 nomodule 的脚本。这意味着您可以给支持模块的浏览器提供模块树，同时给其他浏览器提供一个降级版本。
浏览器问题
Firefox 浏览器不支持 nomodule (issue)。已在 Firefox nightly 中修复！
Edge 浏览器不支持 nomodule (issue)。已在 Edge 16 中修复！
Safari 浏览器不支持 nomodule。已在 Safari 11 中修复！对于 10.1，这里有一个非常聪明的替代办法。
在线演示
执行的顺序是：2.js，1.mjs，3.js。
script 在获取期间会阻塞 HTML 解析器，简直太糟糕了。对于常规脚本，您可以使用 defer 来避免阻塞，当然这也会推迟脚本的执行，直到文档完成解析，并与其他延迟脚本一起维护执行顺序。模块脚本的默认表现行为就像 defer ——当它正在获取时，没有办法让一个模块脚本阻塞 HTML 解析器。
模块脚本使用和添加了 defer 的常规脚本相同的执行队列。
内联脚本也是延时的在线演示
执行顺序是1.js ，内联脚本，内联脚本，2.js 。
常规的内联脚本会忽略 defer ，然而内联模块脚本却总是被延迟，无论它们有没有导入任何东西。
Async 对内联、外部模块同样适用在线演示
快速下载的脚本会在慢速下载的脚本之前执行。
与常规脚本一样，async 会让脚本在下载过程中不会阻塞 HTML 解析器，并且尽快地执行。与常规脚本不同，async 也适用于内联模块。
与往常的 async 一样，脚本不会按照它们出现在 DOM 中的顺序执行。
浏览器问题
Firefox 浏览器不支持内联模块脚本上的 async (issue)。已在 Firefox 59 中修复！
在线演示
如果您理解 ES 模块，您就会知道您虽然可以引入它们很多次，但是它们却仅仅会执行一次。当然，这同样适用于HTML中的脚本模块 - 特定URL的模块脚本每页只执行一次。
浏览器问题Edge 执行多次模块 (issue)。已修复，但是还没发布（希望 Edge 17 会带上这个修复内容）。
总是使用 CORS在线演示
与常规脚本不同，模块脚本（及其引入的内容）是通过 CORS 获取的。这就意味着跨域的模块脚本必须返回有效的 CORS 响应头 ，比如 Access-Control-Allow-Origin: *。
浏览器问题
Firefox 加载 Demo 页面失败 (issue)
Edge 加载没有 CORS header 的模块脚本 (issue)。 已在 Edge 16 中修复！
在线演示
如果请求来自相同的源，大多数基于 CORS 的 API 会发送凭据（cookie 等），但是 fetch() 和模块脚本却是例外的——非您要求它们，否则它们不会发送凭据除。
您可以通过添加 crossorigin 属性来向同源模块添加凭据（这对我来说似乎有点奇怪，我在规范中对此提出质疑）。如果您打算向其他的源也发送凭据，使用 crossorigin="use-credentials"。注意其他源必须使用 Access-Control-Allow-Credentials：true 的响应头来响应。
此外，还有一个与“模块只执行一次”规则相关的问题。模块由其URL标记，因此如果首次请求了一个模块而不携带凭据，然后再次携带凭据请求该模块，那么第二次获得的依然是不携带凭证的模块。 这就是为啥我在上面的URL中使用 问号 ? 的原因，使它们成为唯一的。
更新： 上面的情况可能很快就会发生改变。fetch() 和模块脚本默认都会向同源的 URL 发送凭据。Issue
浏览器问题
Chrome 使用凭据请求同源模块（issue）。已在 Chrome 61 中修复！
Safari 即使添加了 crossorigin 属性，也不使用凭据请求同源模块（issue）。
Edge 即使添加了 crossorigin 属性，也不使用凭据请求同源模块（issue）。已在 Edge 16 中修复！
Edge 默认请求同源模块的时候携带了凭据（issue）。
MIME 类型不同于常规脚本，模块脚本必须是有效的 JavaScript MIME 类型中的一种类型，否则模块就不会执行。HTML 标准建议使用 text/javascript。
浏览器问题Edge 执行无效的 MIME 类型脚本（issue）
这就是我目前学到的内容啦。毋庸置疑，我对 ES 模块登陆浏览器感到非常兴奋！
性能建议，动态导入等等！请查阅有关 Web Fundamentals 的文章，深入了解模块使用情况。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100764.html
摘要：文章的第二部分涵盖了内存管理的概念，不久后将发布。的标准化工作是由国际组织负责的，相关规范被称为或者。随着分析器和编译器不断地更改字节码，的执行性能逐渐提高。 原文地址：How Does JavaScript Really Work? (Part 1) 原文作者：Priyesh Patel 译者：Chor showImg(https://segmentfault.com/img...
摘要：随后，它出现在公司之后的浏览器，以及从微软从起发布的所有浏览器上。标准的第版在年月的大会上被表决接受。第版在年月底大会上被采纳。 前言 本系列译文的初衷旨在希望更多人能够了解关于JS的一些基本概念，遇到原理性的问题时多去翻翻文档，而不是在社区无休止的重复提出某些在文档中能够非常方便快捷就能找到的东西。 精力和水平有限，所以暂时只打算尝试翻译前面几章概括性的介绍，同时后面的章节大...
摘要：将转换成常见的使用实现的基于迭代器的迭代。处停止迭代器基于鸭子模型接口这里使用语法仅仅为了说明问题使用支持为了使用迭代器属性需要引入。生成器是迭代器的子类，包含了附加的与。 原文地址：http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》，请把star献给他，你可以在此尝试这些特性REPL。 概述 ECMAScr...
摘要：有哪些新特性有哪些改进学着使用这个新版本，来构建更快的应用吧。继版本之后，花了将近八个月的时间来发布。的创始人之一，，建议用户使用，以便使用最优的性能，是因为源代码使用了新特性。全新的插件系统配备了全新整改的插件系统。 本文原文地址：https://auth0.com/blog/webpac...第一次翻译，不当之处，欢迎指正 官方已经发布了Webpack 4.0。有哪些新特性？有哪些...
摘要：技术上来说这个机制被称为动态分配或代理。定义类一个类是一个正式的抽象集，它规定了对象的初始状态和行为。技术上来说一个类表示构造函数原型的组合。因此构造函数创建对象并自动设置新创建实例的原型。第二次调用时，相同的上下文再次被压入栈并恢复。 原文：JavaScript. The Core: 2nd Edition作者：Dmitry Soshnikov 文章其他语言版本：俄语 这篇文章是 ...
阅读 2655·2021-10-14 09:43
阅读 1432·2021-09-29 09:34
阅读 1576·2021-07-28 00:16
阅读 2843·2019-08-30 15:53
阅读 2742·2019-08-30 13:59
阅读 2819·2019-08-30 13:57
阅读 948·2019-08-26 13:38
阅读 1713·2019-08-26 13:25
