知乎问题：如何看待 TC39 的提案 Module Fragments？
共 2209字，需浏览 5分钟
·
2021-08-02 15:53
闲逛知乎的时候看到了这个问题，下面只有 2 个回答。贺师俊大佬竟然也关注了这个问题，于是......
以下是知乎原文，欢迎各位去知乎为俺三连：点赞、评论和收藏。
没人邀请，我来勇敢回答一把子这个问题。
首先来看下这个提案到底是什么。
JavaScript module fragments are a syntax for named, inline JS modules, which can be used for bundling multiple modules into a single JavaScript file.
直译一下，JS module fragments 是 JS 模块语法的一个提案，我们也可以叫它 “模块片段”，可用于在单个 JavaScript 文件中写多个模块代码。
简单来说，目前的 ES Modules 是以文件为单位划分的，而 TC39 这个提案的意思是可以更进一步，在同一个 JS 文件中，对代码进行模块的拆分，这有点类似于很多其它编程语言中的 `region` 注释片段。
举个例子，上代码：
// filename: app.js
// 定义一个模块 #count module "#count" { let i = 0; // 模块导出一个函数 export function count() { i++; return i; }}
// 定义另外一个模块 #uppercasemodule "#uppercase" { // 导出一个函数 export function uppercase(string) { return string.toUpperCase(); }}
// 导入模块，此处与 ES 标准化模块语法一致，import { count } from "#count";import { uppercase } from "#uppercase";
console.log(count()); // 1console.log(uppercase("daniel")); // "DANIEL"
没错，这就是提案中的示例代码，我加了注释。
之所以有这样的提案，大家可以在提案中的动机中找到，大致可以总结为小文件在各类环境中的加载成本很高，并且需要借助其他打包工具。
截取一段，用我小学二年级的翻译水平来展示一下：
This proposal adds a syntax to JavaScript to allow for several JavaScript modules in one file. This format can be used as output by bundlers, with low overhead on execution, so that bundlers don't have to emulate as much, and JS engines can see what's going on. It's also convenient to be typed directly by JavaScript developers, and it should be low overhead to fit into existing workflows.
该提案为 JavaScript 增加了一种语法，该语法允许在一个文件中包含多个 JavaScript 模块。这种格式的模块可以被打包输出，以此降低执行成本，因此，传统意义上的打包工具就不再那么重要了，JS 引擎本身可以就可以完成这一系列工作，便于开发者可以直接使用原始的 JavaScript，而且这也很容易让其融入到现有的开发流程之中。
我个人是很支持这个提案的。
从根本上来讲，JavaScript 的诞生太过快速（“草率”），当时也没想到今天会有这么大的应用规模，所以很多高级特性并不完备。
历史上，JavaScript 一直没有模块系统，无法将一个大程序按照各自职责拆分成互相依赖的小模块，再用简单的方法拼装起来。这对构建复杂的大型应用形成了巨大障碍。
现在大家耳详能熟的 Webpack 就是为了更好的解决这一问题而诞生的，不过这一次，不再是社区方案或者工具，终于有人向语言标准下手了，试图从语言层面站出来彻底根治这个问题。
这一语法的出现，在现阶段最大的核心能力就是“模块打包相关”。在该提案的动机里有提到一个非常重要的点：“浏览器预判” ，即浏览器提前预判是否需要预先加载模块，这样一来，就能够区分模块是否需要被加载，从而有效提升加载性能。
当然，如果此提案能够被最终通过，也一定是渐进式的，至于能够释放多大的能量，就看各位大佬的聪明才智了。
xdm，支持此提案的给我点赞走一波……
推荐阅读：
恭喜你又在前端道路上进步了一点点。
点个“在看”和“赞”吧！