CodePen可运行ES6 JS代码本地及托管部署报错解决咨询

你遇到的所有问题都和ES6语法本身无关，是运行环境配置不对导致的：

• 在线代码编辑器（CodePen、JSFiddle）默认在后台帮你处理了模块解析、静态服务、响应头配置所有环节，直接导出文件裸跑必然踩坑。
• 第一个Cannot use import statement outside a module报错：浏览器默认将无特殊声明的script标签解析为传统非模块脚本，遇到ES模块的import语法就会拦截，给script标签加type="module"是正确的第一步，但没解决后续环境问题。
• 第二个file协议CORS报错：直接双击本地HTML文件走的是file://协议，该协议下页面源标记为null，浏览器安全规则不允许加载ES模块资源，这种方式无论怎么改文件后缀都跑不通带模块的代码。
• 第三个MIME类型报错：你用的WordPress托管服务器没有给JS模块文件返回正确的Content-Type响应头，浏览器规范要求模块脚本必须返回text/javascript类型的MIME值，空值或其他类型会被直接拦截。

本地运行方案 #

绝对不要直接双击打开HTML文件，按下面操作：

• 保持JS文件为.js后缀，不需要改成.mjs，给引入脚本的script标签加上type="module"属性，核对所有import的文件路径为正确的相对路径。
• 在代码文件所在目录启动一个本地静态HTTP服务，任选一种你方便的方式：
  • 已安装Node.js的话，在当前目录执行命令npx serve，按照终端输出的本地HTTP地址（一般为http://localhost:3000）访问即可。
  • 使用VS Code编辑器的话，安装Live Server插件，右键HTML文件选择「Open with Live Server」即可自动启动服务打开页面。

不要尝试通过修改浏览器安全配置关闭CORS限制来跑本地file协议页面，会带来严重的安全风险。

WordPress站点部署方案 #

解决MIME类型校验问题：

• 同样保持JS文件为.js后缀，确认上传路径和script标签的引入路径完全匹配，标签携带type="module"属性。
• 绝大多数WordPress虚拟主机用的是Apache环境，在站点根目录的.htaccess配置文件中加入以下规则，给JS文件配置正确的MIME类型：

AddType text/javascript .js .mjs

• 清空WordPress站点缓存、浏览器本地缓存后重新访问即可。如果添加配置后仍然报错，直接联系主机服务商，要求给.js、.mjs后缀的文件配置正确的Content-Type: text/javascript响应头即可。

零配置懒人方案 #

如果不想折腾服务和服务器配置，可以彻底避开ES模块加载的所有限制：

• 把所有第三方依赖通过普通script标签从CDN引入，删除代码中对应的import语句。
• 把你自己写的所有业务JS代码合并到同一个JS文件或者同一个script块中，去掉script标签上的type="module"属性。这种方式生成的页面不管是本地双击打开，还是上传到任意静态托管服务，都不会触发模块相关的报错。

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