我一直在试验最近添加到浏览器中的新的本机ecmascript模块支持。最终能够直接、干净地从javascript导入脚本是一件令人愉快的事情。
/example.html 🔍
<script type="module">
import {example} from '/example.js';
example();
</script> /example.js
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};但是，这只允许我导入由单独的外部javascript文件定义的模块。我通常更喜欢内联一些用于初始呈现的脚本，这样它们的请求就不会阻塞页面的其余部分。对于传统的非正式结构库，这可能如下所示：
/inline-traditional.html 🔍
<body>
<script>
var example = {};
example.example = function() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script>
example.example();
</script>然而，简单地内联模块文件显然是行不通的，因为它将删除用于向其他模块标识模块的文件名。http/2服务器推送可能是处理这种情况的规范方法，但它仍然不是所有环境中的选项。
是否可以使用ecmascript模块执行等效转换？
有没有什么方法可以让你放松一下 <script type="module"> 是否要在同一文档中导入另一个模块导出的模块？
我认为这可以通过允许脚本指定文件路径来实现，并且其行为就像已经从路径下载或推送了文件一样。
/inline-name.html 🔍
<script type="module" name="/example.js">
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script type="module">
import {example} from '/example.js';
example();
</script>或者可以通过完全不同的参考方案，例如用于本地svg参考：
/inline-id.html 🔍
<script type="module" id="example">
export function example() {
document.body.appendChild(document.createTextNode("hello"));
};
</script>
<script type="module">
import {example} from '#example';
example();
</script>但这两种假设都不起作用，而且我还没有看到另一种可行的方法。
4条答案
按热度按时间nnvyjq4y1#
从“#id”拼凑我们自己的输入
内联脚本之间的导出/导入本机不受支持，但为我的文档拼凑一个实现是一个有趣的练习。代码向下延伸到一个小块，我这样使用它：
而不是
<script type="module">，我们需要使用自定义类型定义脚本元素，如<script type="inline-module">. 这可以防止浏览器试图自行执行其内容，而将其留给我们来处理。脚本（下面的完整版本）将查找所有inline-module为文档中的元素编写脚本，并将它们转换为具有所需行为的常规脚本模块元素。内联脚本不能直接从彼此导入，因此我们需要为脚本提供可导入的URL。我们生成一个
blob:它们的url，包含它们的代码，并设置src属性从该url运行，而不是内联运行。这个blob:URL与服务器上的普通URL类似，因此可以从其他模块导入。每次我们看到一个后续的inline-module试图从中导入'#example'哪里example是一个身份证inline-module我们已经进行了转换，我们将该导入修改为从blob:而不是url。这将保持模块应有的一次性执行和参考重复数据消除功能。模块脚本元素的执行总是推迟到文档解析之后，因此我们不需要担心如何支持传统脚本元素在文档仍在解析时修改文档。
警告：此简单实现不处理在解析初始文档后添加的脚本元素，也不允许从文档中在脚本元素之后出现的其他脚本元素导入脚本元素。如果两者都有
module及inline-module在文档中的脚本元素中，它们的相对执行顺序可能不正确。源代码转换是使用粗糙的正则表达式执行的，该正则表达式不会处理某些边缘情况，例如ID中的句点。pdkcd3nj2#
这在服务人员中是可能的。
由于服务工作者应该在能够处理页面之前安装，因此需要有一个单独的页面来初始化工作者以避免鸡/蛋问题，或者在工作者准备好后可以重新加载页面。
范例
这里有一个演示，应该可以在支持本机es模块和
async..await（即铬）：index.html
sw.js
正在缓存脚本正文（本机）
Cache也可以使用）并返回相应的模块请求。担心
在性能、灵活性、稳定性和浏览器支持方面，该方法不如使用webpack或rollup等捆绑工具构建和分块的应用程序，尤其是在主要关注阻止并发请求的情况下。
内联脚本增加了带宽使用。当脚本加载一次并由浏览器缓存时，自然可以避免这种情况。
内联脚本不是模块化的，并且与ecmascript模块的概念相矛盾（除非它们是由服务器端模板从实际模块生成的）。
服务工作者初始化应在单独的页面上执行，以避免不必要的请求。
该解决方案仅限于单个页面，不需要
<base>考虑到。正则表达式仅用于演示目的。在上面的示例中使用时，它支持执行页面上可用的任意javascript代码。经验证的类库
parse5应改为使用（这将导致性能开销，而且可能存在安全问题）。永远不要使用正则表达式来解析dom。u3r8eeie3#
我认为那是不可能的。
对于内联脚本，您必须使用一种更传统的模块化代码的方法，比如使用对象文本演示的名称空间。
使用webpack，您可以进行代码拆分，您可以使用它在页面加载时获取非常小的代码块，然后根据需要增量获取其余的代码块。webpack还有一个优势，即允许您在比chrome canary更多的环境中使用模块语法（以及大量其他es201x改进）。
okxuctiv4#
我使用本文修改了jeremy的答案，以防止脚本执行
我希望这能解决动态脚本附加问题（使用mutationobserver），而不是代码不语法突出显示（保留type=module），我设想，一旦导入的ID添加到dom中，使用相同的mutationobserver就可以执行脚本。
请告诉我这是否有问题！