如何隔离JS代码的执行，以便每个脚本都在“容器”中执行？尝试了Shadowdom和Iife，不做工作

Question

自动生成。

<composite:implementation>
    <div id="#{cc.attrs.name}"></div>
    <script src="http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.css"/>
</composite:implementation>

当每个页面有一个组件时，根本没有问题。但是，如果我有一个以上的组件，那么变量名称中有碰撞。所以如果我这样做

                    <div class="ui-g-12 ui-g-nopad">
                        <ic:microfrontend name="statuspanel"/>
                        <ic:microfrontend name="dashboard"/>
                    </div>

我得到这个错误

dashboard.js:1 Uncaught SyntaxError: Identifier 'Wc' has already been declared (at dashboard.js:1:1)

我搜索了互联网，并找到了可能解决问题的两种方法。第一种方法是使用Shadowdom。

<composite:implementation>
    <div id="#{cc.attrs.name}_host"></div>
    <div id="#{cc.attrs.name}"></div>
    <script type="text/javascript">
        (function () {
            const shadowHost = document.getElementById("#{cc.attrs.name}_host");
            const shadowRoot = shadowHost.attachShadow({mode: 'open'});

            const div = document.createElement('div');
            div.id = "#{cc.attrs.name}";
            shadowRoot.appendChild(div);

            const script = document.createElement("script");
            script.src = `http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.js`;
            shadowRoot.appendChild(script);

            const link = document.createElement("link");
            link.rel = 'stylesheet';
            link.href = `http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.css`;
            shadowRoot.appendChild(link);
        })();
    </script>
</composite:implementation>

但我仍然遇到相同的错误。另外，脚本只能在阴影之外找到div，它看不到内部的div（我确实事先删除了div）。

Uncaught SyntaxError: Identifier 'Wc' has already been declared (at dashboard.js:1:1)

因此，我尝试了第二种方法 - 将脚本包装到一个函数以使全局变量函数范围范围。

<composite:implementation>
    <div id="#{cc.attrs.name}"></div>
    <script type="text/javascript">
        (function () {
            var script = document.createElement('script');
            script.src = 'http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.js';
            document.head.appendChild(script);
        })();
    </script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.css"/>
</composite:implementation>

，但是我仍然遇到相同的错误。 Uncaught SyntaxError: Identifier 'Wc' has already been declared (at dashboard.js:1:1)

我还尝试更改自动生成的JS文件（仪表板和statuspanel），在那里我用LET替换Var，但这会打破脚本。因此，这不是一个选择。

问题：

如何隔离JS代码的执行，以使每个脚本都在“容器”中执行？使用iframe不是一个选项。

您可以使用ES模块隔离JavaScript代码

：

<composite:implementation>
    <div id="#{cc.attrs.name}"></div>
    <script type="module" src="http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8900/microfrontends/#{cc.attrs.name}/#{cc.attrs.name}.css"/>
</composite:implementation>