添加import的JavaScript脚本未执行，求助排查代码或WebStorm问题

问题根源及修复步骤 #

1. 修正ES模块的导入路径

浏览器的ES模块加载器要求完整的文件扩展名，不能省略.js。修改main.js的导入语句：

// 原代码
import {print} from "./func";

// 修改后
import {print} from "./func.js";

2. 使用HTTP服务器运行项目，而非直接打开本地文件

直接双击test.html会以file://协议加载，浏览器出于安全限制，会阻止本地ES模块的加载（触发CORS错误）。必须通过HTTP环境访问：

• WebStorm方式：右键点击test.html，选择「Open in Browser」，WebStorm会自动启动内置本地服务器，访问地址类似http://localhost:xxxx/test.html
• Node.js工具：全局安装http-server后，在项目文件夹执行命令：

  npm install -g http-server
  http-server
  

  然后访问http://localhost:8080/test.html
• Python简易服务器：在项目文件夹执行对应命令：

  # Python 3
  python -m http.server
  # Python 2
  python -m SimpleHTTPServer
  

  访问命令行输出的对应地址即可

验证 #

完成上述修改后，再访问页面，id="display"的div中会正常显示「Hello」。

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