Node.js中使用import导致JS与HTML关联失效的问题排查

核心问题 #

当JS文件使用ES模块的import语句后，浏览器默认不会将其识别为模块，必须显式声明；另外你用<link>引入JS的方式本身就是错误的，<link>仅用于加载CSS资源，之前能运行属于浏览器的异常兼容行为。

正确解决方案 #

• 弃用错误的<link>引入方式：彻底删除<link rel="stylesheet" href="javascript">这类代码，这和JS加载毫无关系。
• 声明JS为ES模块：修改HTML中的<script>标签，添加type="module"属性，同时确保文件路径正确：

  <script type="module" src="你的JS文件名.js"></script>
  

  比如你的JS文件叫main.js，就写src="main.js"，路径要和HTML文件的相对位置对应。
• Node.js环境兼容处理：如果该JS文件需要同时在Node.js环境运行，在项目根目录的package.json中添加以下配置，让Node.js支持ES模块：

  {
    "type": "module"
  }
  

• 解决本地跨域问题：如果直接打开本地HTML文件（file://协议）出现模块加载失败，启动本地服务器运行项目，比如用Node.js的http-server：

  # 先安装http-server
  npm install -g http-server
  # 在项目目录启动服务器
  http-server
  

  然后通过http://localhost:8080（默认端口）访问页面。

内容的提问来源于stack exchange，提问作者Ali Shwahde