如何导入html中<script type ="module">标签中定义的es6模块?

Ste*_*fan 5 html javascript es6-modules

我可以在我的html文件me.html中定义一个模块:

<script type="module" id="DEFAULT_MODULE">   
           import Atom from './atom.js';       
           console.log("definition of getAtom")
           export default function getAtom(){
            return new Atom('atom');
           }
           console.log("exported getAtom")
</script>
Run Code Online (Sandbox Code Playgroud)

另见

=>是否可以将"匿名"模块导入同一个html文件中的另一个模块脚本?或者某些"代码隐藏" - 也是由me.html文件加载的JavaScript文件?出口似乎有效; 至少它不会抛出任何错误.

为了导入getAtom我试过的方法,例如:

<script type="module">
    import getAtom from '.'; //this line does not work
    console.log("usage of getAtom")
    var atom = getAtom();             
</script>
Run Code Online (Sandbox Code Playgroud)

我希望有一些语法

 import getAtom;
 import getAtom from '.';
 import getAtom from window;
 import getAtom from './me.html';
 import getAtom from '.DEFAULT_MODULE';
Run Code Online (Sandbox Code Playgroud)

但是,这些线都不起作用.

=>如果可能的话,引用"匿名"模块的正确语法是什么?

我使用Chrome版本63.0.3239.108.

相关问题:

如何动态执行/评估包含ES6模块的JavaScript代码/需要一些依赖项?

hax*_*hax 4

据我了解,无法导入“匿名”模块,因为“匿名”模块没有模块说明符或单独的 url(它import.meta.url只是作为当前规范的 html url)。理论上它可以在未来扩展,但我找不到此类功能的良好用例。

  • 在运行时添加 `&lt;script type="module"&gt;` 标签允许动态包含 ES6 模块。但是,无法访问它们的“导出”。这使得应用动态包含的代码(的结果)变得困难。另一种解决方案可能是未来支持“import”语句的“eval”方法。请参阅上述相关问题,并让我知道当前是否有更好的动态代码执行替代方案。 (3认同)
  • 您可以尝试 data url 或 `createObjectURL` 并将结果 url 分配给 `src` 属性。 (3认同)