如何本地运行CodePen项目？解决HTML/CSS/TS文件无法运行问题

1. 补全外部依赖加载 #

这个项目依赖MediaPipe、TensorFlow.js这类第三方库，CodePen会自动加载配置好的CDN，但本地需要手动引入：

• 打开原CodePen项目的「Settings」→「JS」面板，复制所有外部CDN链接。
• 在本地HTML的<body>末尾（或<head>里）添加对应的<script>标签，注意加载顺序（比如TensorFlow相关库要放在MediaPipe库之前）。

2. 解决ES模块与CORS限制 #

如果代码里用了import这类ES模块语法，直接双击打开本地HTML会触发浏览器CORS限制，导致JS无法运行：

• 用本地服务器运行项目：
  • Python3用户：在项目目录打开终端，执行python -m http.server 8000，然后访问http://localhost:8000。
  • Node.js用户：先全局安装http-server（npm install -g http-server），再在项目目录执行http-server，访问提示的本地地址。
• 若项目用TypeScript：先把TS编译成浏览器兼容的JS文件，可通过tsc命令（需先安装TypeScript：npm install -g typescript），配合tsconfig.json配置target: "ES6"、module: "UMD"来编译。

3. 核对文件引用路径 #

• 确保HTML里的CSS、JS文件路径是正确的相对路径，比如JS文件放在js文件夹下，就要写<script src="./js/main.js"></script>，不要用绝对路径或错误路径。
• 不要直接在HTML里引用TS文件，必须先编译为JS后再引用，除非用<script type="module" src="./main.ts"></script>（仍需本地服务器环境）。

4. 查看控制台定位具体错误 #

按F12打开浏览器开发者工具，切换到「Console」面板，根据报错信息针对性解决：

• 出现CORS相关错误：立刻换成本地服务器运行，不要直接打开HTML文件。
• 出现Cannot find module：检查依赖CDN是否加载完整，或者模块文件路径是否正确。
• 出现MediaPipe相关报错：确认MediaPipe的CDN链接有效，且网络能正常访问这些资源。

5. 修正导出项目的路径问题 #

从CodePen导出的zip包解压后，可能存在路径引用错误：

• 打开index.html，检查JS、CSS的引用路径，把类似/js/script.js的绝对路径改成./js/script.js这类相对路径。
• 导出的TS文件需要自行编译为JS，替换原引用路径。

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