Javascript 在脚本顶部使用导入时函数停止工作，即使没有尝试使用导入的内容

Question

我正在尝试使用 lit 而不是基本的 js 重新创建我的一个简单程序，但是添加导入语句似乎会破坏每个功能。

在我的 package.json 中单独使用 "type": "module" 似乎一切正常，但第二次我在我的脚本 link 中将 type="text/javascript" 更改为 type="module"在我的 html 内，或者当我添加：

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

到我的 app.js 的顶部，或者甚至两者结合，我的 none 功能似乎不再起作用。

我尝试按照此线程中的建议更改函数的范围：Functions not working when ```type="module"``` or import，但这似乎没有任何效果。

这是一个这样的函数的例子：

function initialize()
{
    xWins = window.sessionStorage.getItem('xWins');
    oWins = window.sessionStorage.getItem('oWins');
    draws = window.sessionStorage.getItem('draws');
    if(xWins == null) { xWins = 0; }
    if(oWins == null) { oWins = 0; }
    if(draws == null) { draws = 0; }
    document.getElementById('numXWins').innerHTML = "X WINS: " +xWins;
    document.getElementById('numOWins').innerHTML = "O WINS: " +oWins;
    document.getElementById('numDraws').innerHTML = "DRAWS: " +draws;
}

有什么我想念的吗？添加导入语句后如何让我的函数继续工作？

编辑：添加我的 index.html 为了完成

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="./app.js" defer></script>
    <script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
</head> 
<body onload="initialize();">
    <h3>Tic Tac Toe</h3>
    <p id="rules">Rules: One player chooses X's, the other chooses O's. Take turns drawing your symbols onto a square. The first to get three in a row wins!</p>    
    <table id="scoreboard">
        <thead>
            <tr>
                <td id="numXWins">X WINS</td>
                <td id="numOWins">O WINS</td>
                <td id="numDraws">DRAWS</td>
            </tr>
        </thead>
        <tbody>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tbody>
    </table>
    <br>
    <table id="gameboard">
        <tr>
            <td><input type="button" name="gamecell" value="   " class="0,0" onclick="play(this);"></td>
            <td><input type="button" name="gamecell" value="   " class="0,1" onclick="play(this);"></td>
            <td><input type="button" name="gamecell" value="   " class="0,2" onclick="play(this);"></td>
        </tr>
        <tr>
            <td><input type="button" name="gamecell" value="   " class="1,0" onclick="play(this);"></td>
            <td><input type="button" name="gamecell" value="   " class="1,1" onclick="play(this);"></td>
            <td><input type="button" name="gamecell" value="   " class="1,2" onclick="play(this);"></td>
        </tr>
        <tr>
            <td><input type="button" name="gamecell" value="   " class="2,0" onclick="play(this);"></td>
            <td><input type="button" name="gamecell" value="   " class="2,1" onclick="play(this);"></td>
            <td><input type="button" name="gamecell" value="   " class="2,2" onclick="play(this);"></td>
        </tr>
    </table>
    <p id="caption" value="Current Turn: X">Current Turn: X</p>
    <input type="button" id="rematch" value="Rematch?" onclick="rematch();">
</body>
</html>

Answer 1

你能做的最好的事情就是一切都是一个元素，例如下面的代码片段。

<script type="module">
import {
  LitElement,
} from "https://unpkg.com/lit-element/lit-element.js?module";
import {html} from "https://unpkg.com/lit/static-html.js?module";

class MyElement extends LitElement {
  
  constructor() {
    super();
  }
  
  play(e) {
    console.log('play');
    e.target.value = 'X';
  }
  
  rematch() {
    console.log('rematch');
  }
  
  render() {
    return html`
      <h3>Tic Tac Toe</h3>
    <p id="rules">Rules: One player chooses X's, the other chooses O's. Take turns drawing your symbols onto a square. The first to get three in a row wins!</p>    
    <table id="scoreboard">
        <thead>
            <tr>
                <td id="numXWins">X WINS</td>
                <td id="numOWins">O WINS</td>
                <td id="numDraws">DRAWS</td>
            </tr>
        </thead>
        <tbody>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tbody>
    </table>
    <br>
    <table id="gameboard">
        <tr>
            <td><input type="button" name="gamecell" value="   " class="0,0" @click="${this.play}"></td>
            <td><input type="button" name="gamecell" value="   " class="0,1" @click="${this.play}"></td>
            <td><input type="button" name="gamecell" value="   " class="0,2" @click="${this.play}"></td>
        </tr>
        <tr>
            <td><input type="button" name="gamecell" value="   " class="1,0" @click="${this.play}"></td>
            <td><input type="button" name="gamecell" value="   " class="1,1" @click="${this.play}"></td>
            <td><input type="button" name="gamecell" value="   " class="1,2" @click="${this.play}"></td>
        </tr>
        <tr>
            <td><input type="button" name="gamecell" value="   " class="2,0" @click="${this.play}"></td>
            <td><input type="button" name="gamecell" value="   " class="2,1" @click="${this.play}"></td>
            <td><input type="button" name="gamecell" value="   " class="2,2" @click="${this.play}"></td>
        </tr>
    </table>
    <p id="caption" value="Current Turn: X">Current Turn: X</p>
    <input type="button" id="rematch" value="Rematch?" @click="${this.rematch}">`
  }
}

customElements.define("my-element", MyElement);
</script>
<my-element></my-element>

Javascript 在脚本顶部使用导入时函数停止工作，即使没有尝试使用导入的内容

Javascript functions stop working when using import at top of script, even without trying to use what's imported

javascript

html

visual-studio-code

lit