个人中心
gpt4 book ai didi

javascript - 在 HTML 中内联 ECMAScript 模块

转载 作者：行者123 更新时间：2023-11-28 03:23:55 29 4
gpt4 key购买 nike

我一直在尝试新的 native ECMAScript module support最近已添加到浏览器中。很高兴终于能够直接、干净地从 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>

但是这些假设实际上都不起作用，而且我还没有看到可行的替代方案。

最佳答案

一起破解我们自己的import from '#id'

native 不支持内联脚本之间的导出/导入，但将我的文档的实现组合在一起是一个有趣的练习。代码高尔夫到一个小块，我这样使用它:

<script type="module" data-info="https://stackoverflow.com/a/43834063">let l,e,t
='script',p=/(from\s+|import\s+)['"](#[\w\-]+)['"]/g,x='textContent',d=document,
s,o;for(o of d.querySelectorAll(t+'[type=inline-module]'))l=d.createElement(t),o
.id?l.id=o.id:0,l.type='module',l[x]=o[x].replace(p,(u,a,z)=>(e=d.querySelector(
t+z+'[type=module][src]'))?a+`/* ${z} */'${e.src}'`:u),l.src=URL.createObjectURL
(new Blob([l[x]],{type:'application/java'+t})),o.replaceWith(l)//inline</script>

<script type="inline-module" id="utils">
  let n = 1;
  
  export const log = message => {
    const output = document.createElement('pre');
    output.textContent = `[${n++}] ${message}`;
    document.body.appendChild(output);
  };
</script>

<script type="inline-module" id="dogs">
  import {log} from '#utils';
  
  log("Exporting dog names.");
  
  export const names = ["Kayla", "Bentley", "Gilligan"];
</script>

<script type="inline-module">
  import {log} from '#utils';
  import {names as dogNames} from '#dogs';
  
  log(`Imported dog names: ${dogNames.join(", ")}.`);
</script>

而不是 <script type="module"> ，我们需要使用像 <script type="inline-module"> 这样的自定义类型来定义我们的脚本元素。 。这可以防止浏览器尝试自行执行它们的内容，将它们留给我们来处理。该脚本(完整版本如下)查找所有 inline-module文档中的脚本元素，并将它们转换为具有我们想要的行为的常规脚本模块元素。

内联脚本不能直接相互导入，因此我们需要为脚本提供可导入的 URL。我们生成一个blob:他们每个人的 URL，包含他们的代码，并设置 src属性从该 URL 运行而不是内联运行。 blob: URL 的行为就像来自服务器的普通 URL，因此可以从其他模块导入它们。每次我们看到后续的inline-module尝试从 '#example' 导入，其中example是 inline-module 的 ID我们已经进行了转换，我们将该导入修改为从 blob: 导入改为网址。这维持了模块应有的一次性执行和引用重复数据删除功能。

<script type="module" id="dogs" src="blob:https://example.com/9dc17f20-04ab-44cd-906e">
  import {log} from /* #utils */ 'blob:https://example.com/88fd6f1e-fdf4-4920-9a3b';

  log("Exporting dog names.");

  export const names = ["Kayla", "Bentley", "Gilligan"];
</script>

模块脚本元素的执行始终推迟到文档解析之后，因此我们无需担心尝试支持传统脚本元素在文档仍在解析时修改文档的方式。

export {};

for (const original of document.querySelectorAll('script[type=inline-module]')) {
  const replacement = document.createElement('script');

  // Preserve the ID so the element can be selected for import.
  if (original.id) {
    replacement.id = original.id;
  }

  replacement.type = 'module';

  const transformedSource = original.textContent.replace(
    // Find anything that looks like an import from '#some-id'.
    /(from\s+|import\s+)['"](#[\w\-]+)['"]/g,
    (unmodified, action, selector) => {
      // If we can find a suitable script with that id...
      const refEl = document.querySelector('script[type=module][src]' + selector);
      return refEl ?
        // ..then update the import to use that script's src URL instead.
        `${action}/* ${selector} */ '${refEl.src}'` :
        unmodified;
    });

  // Include the updated code in the src attribute as a blob URL that can be re-imported.
  replacement.src = URL.createObjectURL(
    new Blob([transformedSource], {type: 'application/javascript'}));

  // Insert the updated code inline, for debugging (it will be ignored).
  replacement.textContent = transformedSource;

  original.replaceWith(replacement);
}

警告:这个简单的实现不会处理解析初始文档后添加的脚本元素，也不会允许脚本元素从文档中出现在它们之后的其他脚本元素导入。如果您两者都有module和inline-module文档中的脚本元素，它们的相对执行顺序可能不正确。源代码转换是使用原始正则表达式执行的，该正则表达式无法处理某些边缘情况，例如 ID 中的句点。

关于javascript - 在 HTML 中内联 ECMAScript 模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58843611/

29 4 0
文章推荐： html - 使用 Bootstrap 使图像跨越浏览器的整个宽度
文章推荐： css - 点击提交按钮后隐藏表单并出现 'thank you' 框
文章推荐： Android - 如何使用 Html.ImageGetter 以在编辑文本或 TextView 中显示图像数量
文章推荐： c++ - 如何从 QLineEdit 对象中检索文本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com