一起黑客攻击`import from '#id'`

Question

我一直在尝试最近添加到浏览器中的新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 refs：

/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>

但是这些假设中的任何一个都没有实际起作用，而且我还没有看到其他假设。

Answer 1

一起黑客攻击`import from '#id'`

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

<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:网址，其中包含其代码，并将src属性设置为从该网址运行而不是内联运行。 blob:网址与服务器中的普通网址相同，因此可以从其他模块导入。每当我们看到后续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中的句点。

Answer 2

服务人员可以做到这一点。

由于服务工作者应该在能够处理页面之前安装，因此需要有一个单独的页面来初始化工作者以避免鸡/蛋问题 - 或者当工作人员准备好时页面可以重新加载。 / p>

Here's an example应该可以在支持本机ES模块和async..await（即Chrome）的浏览器中使用：

的index.html

<html>
  <head>
    <script>
(async () => {
  try {
    const swInstalled = await navigator.serviceWorker.getRegistration('./');

    await navigator.serviceWorker.register('sw.js', { scope: './' })

    if (!swInstalled) {
      location.reload();
    }
  } catch (err) {
    console.error('Worker not registered', err);
  }
})();
    </script>
  </head>
  <body>
    World,

    <script type="module" data-name="./example.js">
      export function example() {
        document.body.appendChild(document.createTextNode("hello"));
      };
    </script>

    <script type="module">
      import {example} from './example.js';

      example();
    </script>  
  </body>
</html>

sw.js

self.addEventListener('fetch', e => {
  // parsed pages
  if (/^https:\/\/run.plnkr.co\/\w+\/$/.test(e.request.url)) {
    e.respondWith(parseResponse(e.request));
  // module files
  } else if (cachedModules.has(e.request.url)) {
    const moduleBody = cachedModules.get(e.request.url);
    const response = new Response(moduleBody,
      { headers: new Headers({ 'Content-Type' : 'text/javascript' }) }
    );
    e.respondWith(response);
  } else {
    e.respondWith(fetch(e.request));
  }
});

const cachedModules = new Map();

async function parseResponse(request) {
  const response = await fetch(request);
  if (!response.body)
    return response;

  const html = await response.text(); // HTML response can be modified further
  const moduleRegex = /<script type="module" data-name="([\w./]+)">([\s\S]*?)<\/script>/;
  const moduleScripts = html.match(new RegExp(moduleRegex.source, 'g'))
    .map(moduleScript => moduleScript.match(moduleRegex));

  for (const [, moduleName, moduleBody] of moduleScripts) {
    const moduleUrl = new URL(moduleName, request.url).href;
    cachedModules.set(moduleUrl, moduleBody);
  }
  const parsedResponse = new Response(html, response);
  return parsedResponse;
}

正在缓存脚本主体（也可以使用本机Cache）并返回各个模块请求。

的关注

在性能，灵活性，可靠性和浏览器支持方面，这种方法不如使用捆绑工具（如Webpack或Rollup）构建和分块的应用程序 - 特别是如果阻止并发请求是主要问题。
< / LI>
内联脚本可以增加带宽使用率，当脚本加载一次并由浏览器缓存时，这自然可以避免。
内联脚本不是模块化的，与ES模块的概念相矛盾（除非它们是由服务器端模板从实际模块生成的）。
应在单独的页面上执行服务工作者初始化，以避免不必要的请求。
解决方案仅限于一个页面，并且不会考虑<base>。
正则表达式仅用于演示目的。当像上面的示例中那样使用时，它可以执行页面上可用的任意JS代码。应该使用像parse5这样经过验证的库（它会导致性能开销，但仍然可能存在安全问题）。 永远不要使用正则表达式来解析DOM 。

Answer 3

我不相信这是可能的。

对于内联脚本，您会遇到一种更传统的模块化代码方式，例如您使用对象文字演示的命名空间。

使用webpack，您可以执行code splitting，您可以使用它在页面加载时获取非常少量的代码，然后根据需要逐步获取其余部分。 Webpack还具有允许您使用模块语法（以及大量其他ES201X改进）的优势，以及更多只有Chrome Canary的环境。

Answer 4

我使用 Jeremy's

调整了 this article to prevent scripts from executing 答案

<script data-info="https://stackoverflow.com/a/43834063">
// awsome guy on [data-info] wrote 90% of this but I added the mutation/module-type part

let l,e,t='script',p=/(from\s+|import\s+)['"](#[\w\-]+)['"]/g,x='textContent',d=document,s,o;

let evls = event => (
  event.target.type === 'javascript/blocked', 
  event.preventDefault(),
  event.target.removeEventListener( 'beforescriptexecute', evls ) )

;(new MutationObserver( mutations => 
  mutations.forEach( ({ addedNodes }) => 
    addedNodes.forEach( node => 
      ( node.nodeType === 1 && node.matches( t+'[module-type=inline]' )
      && ( 
        node.type = 'javascript/blocked',
        node.addEventListener( 'beforescriptexecute', evls ),
      
        o = node,
        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

) ) )))
.observe( document.documentElement, {
  childList: true,
  subtree: true
} )

// for(o of d.querySelectorAll(t+'[module-type=inline]'))
//   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>

我希望这可以解决动态脚本附加问题（使用 MutationObserver），vs 代码而不是语法突出显示（保留类型 = 模块），我想使用相同的 MutationObserver 可以在导入后执行脚本id 被添加到 DOM。

请告诉我这是否有问题！

用HTML

4 个答案:

一起黑客攻击`import from '#id'`

的关注

用HTML

4 个答案:

一起黑客攻击import from '#id'

的关注

一起黑客攻击`import from '#id'`