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

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

我正在尝试使用 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>

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

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