本文旨在提供一个将codepen项目成功部署到本地环境的专业教程，重点解决直接复制粘贴代码时遇到的外部依赖、%ignore_a_1%预处理器和javascript模块导入问题。我们将以一个mediapipe facelandmarker项目为例，详细讲解如何正确引入cdn资源、处理es模块导入，并提供完整的本地运行代码示例，确保项目功能在本地浏览器中正常运行。
引言：CodePen项目本地化挑战
CodePen等在线代码编辑平台为前端开发提供了极大的便利，用户可以快速编写、测试和分享HTML、CSS和JavaScript代码。然而，当尝试将这些项目直接复制到本地环境运行时，开发者常会遇到功能不正常的问题。这通常是由于以下几个原因：
外部依赖未正确引入：CodePen项目可能通过CDN链接引入了外部库（如Material Components Web、MediaPipe等），这些链接在本地环境中需要被精确复制。CSS预处理器：CodePen支持Sass、Less等CSS预处理器。项目中的CSS代码可能使用了@use、@import等预处理器特性，这些在本地环境中未经编译时将无法识别。JavaScript模块导入：现代JavaScript项目通常采用ES模块（ESM）规范进行模块化开发。CodePen可能隐式处理了模块导入路径，但在本地，尤其是通过file://协议直接打开HTML文件时，需要确保import语句指向正确的、可访问的模块URL。资源路径问题：图片、字体或其他静态资源的相对路径在本地文件系统中可能与CodePen服务器环境不同。
本教程将以一个使用MediaPipe FaceLandmarker进行人脸关键点检测的CodePen项目为例，详细演示如何解决这些问题，使其在本地环境成功运行。
准备工作：创建本地项目文件
首先，在你的本地计算机上创建一个新的文件夹，例如my-codepen-project。在这个文件夹中，创建一个名为index.html的文件。所有代码都将整合到这个文件中，以便于演示和理解。
核心步骤：代码整合与依赖处理
要使CodePen项目在本地正常运行，我们需要将HTML、CSS和JavaScript代码整合到index.html中，并特别注意处理所有外部依赖和模块导入。
1. HTML结构与元数据
项目的基本HTML结构应包含必要的head和body标签，以及元数据设置，如字符集、视口配置等。这些是现代网页开发的标准实践。
Face Landmarker
2. CSS样式处理
CodePen中的CSS通常会直接应用，但如果使用了预处理器（如Sass的@use），在本地需要进行调整。对于本例，CSS可以直接嵌入到标签中，同时需要引入外部的Material Components Web CSS。
/* CodePen中的CSS内容，去除预处理器指令（如@use "@material";） 并确保所有样式都直接可解析。 本例中的CSS是纯CSS，可以直接复制。 */ body { font-family: helvetica, arial, sans-serif; margin: 2em; color: #3d3d3d; --mdc-theme-primary: #007f8b; --mdc-theme-on-primary: #f1f3f4; } h1 { font-style: italic; color: #ff6f00; color: #007f8b; } h2 { clear: both; } em { font-weight: bold; } video { clear: both; display: block; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } section { opacity: 1; transition: opacity 500ms ease-in-out; } header, footer { clear: both; } .removed { display: none; } .invisible { opacity: 0.2; } .note { font-style: italic; font-size: 130%; } .videoView, .detectOnClick, .blend-shapes { position: relative; float: left; width: 48%; margin: 2% 1%; cursor: pointer; } .videoView p, .detectOnClick p { position: absolute; padding: 5px; background-color: #007f8b; color: #fff; border: 1px dashed rgba(255, 255, 255, 0.7); z-index: 2; font-size: 12px; margin: 0; } .highlighter { background: rgba(0, 255, 0, 0.25); border: 1px dashed #fff; z-index: 1; position: absolute; } .canvas { z-index: 1; position: absolute; pointer-events: none; } .output_canvas { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .detectOnClick { z-index: 0; } .detectOnClick img { width: 100%; } .blend-shapes-item { display: flex; align-items: center; height: 20px; } .blend-shapes-label { display: flex; width: 120px; justify-content: flex-end; align-items: center; margin-right: 4px; } .blend-shapes-value { display: flex; height: 16px; align-items: center; background-color: #007f8b; }
3. JavaScript模块导入与CDN资源
这是最关键的部分。CodePen中的JavaScript代码可能使用了ES模块（import语句），并且依赖于通过CDN加载的MediaPipe库。我们需要确保：
标签使用type=”module”属性。所有import语句指向正确的、可访问的CDN URL。MediaPipe模型的资产路径也是正确的CDN URL。
特别注意，原始问答中提供的[email protected]链接是Cloudflare的邮件保护机制，在本地直接复制会导致错误。我们需要将其替换为实际的CDN路径。根据CodePen项目，MediaPipe tasks-vision的正确CDN路径应为 https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0。
Face landmark detection using the MediaPipe FaceLandmarker task
// 修正后的MediaPipe tasks-vision CDN导入路径 import vision from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0"; const { FaceLandmarker, FilesetResolver, DrawingUtils } = vision; const demosSection = document.getElementById("demos"); const imageBlendShapes = document.getElementById("image-blend-shapes"); const videoBlendShapes = document.getElementById("video-blend-shapes"); let faceLandmarker; let runningMode = "IMAGE"; // 初始运行模式 let enableWebcamButton; // HTMLButtonElement; let webcamRunning = false; // Boolean = false; const videoWidth = 480; // Before we can use HandLandmarker class we must wait for it to finish // loading. Machine Learning models can be large and take a moment to // get everything needed to run. async function runDemo() { // 修正FilesetResolver的WASM路径 const filesetResolver = await FilesetResolver.forVisionTasks( "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm" ); faceLandmarker = await FaceLandmarker.createFromOptions(filesetResolver, { baseOptions: { modelAssetPath: `https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task`, delegate: "GPU" }, outputFaceBlendshapes: true, runningMode, numFaces: 1 }); demosSection.classList.remove("invisible"); } runDemo(); /******************************************************************** // Demo 1: Grab a bunch of images from the page and detection them // upon click. ********************************************************************/ // In this demo, we have put all our clickable images in divs with the // CSS class 'detectionOnClick'. Lets get all the elements that have // this class. const imageContainers = document.getElementsByClassName("detectOnClick"); // Now let's go through all of these and add a click event listener. for (let i = 0; i = 0; i--) { const n = allCanvas[i]; n.parentNode.removeChild(n); } // We can call faceLandmarker.detect as many times as we like with // different image data each time. This returns a promise // which we wait to complete and then call a function to // print out the results of the prediction. const faceLandmarkerResult = faceLandmarker.detect(event.target); const canvas = document.createElement("canvas"); canvas.setAttribute("class", "canvas"); canvas.setAttribute("width", event.target.naturalWidth + "px"); canvas.setAttribute("height", event.target.naturalHeight + "px"); canvas.style.left = "0px"; canvas.style.top = "0px"; canvas.style.width = `${event.target.width}px`; canvas.style.height = `${event.target.height}px`; event.target.parentNode.appendChild(canvas); const ctx = canvas.getContext("2d"); const drawingUtils = new DrawingUtils(ctx); for (const landmarks of faceLandmarkerResult.faceLandmarks) { drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_TESSELATION, { color: "#C0C0C070", lineWidth: 1 } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_RIGHT_EYE, { color: "#FF3030" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_RIGHT_EYEBROW, { color: "#FF3030" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_LEFT_EYE, { color: "#30FF30" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_LEFT_EYEBROW, { color: "#30FF30" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_FACE_OVAL, { color: "#E0E0E0" } ); drawingUtils.drawConnectors(landmarks, FaceLandmarker.FACE_LANDMARKS_LIPS, { color: "#E0E0E0" }); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_RIGHT_IRIS, { color: "#FF3030" } ); drawingUtils.drawConnectors( landmarks, FaceLandmarker.FACE_LANDMARKS_LEFT_IRIS, { color: "#30FF30" } ); } drawBlendShapes(imageBlendShapes, faceLandmarkerResult.faceBlendshapes); } /******************************************************************** // Demo 2: Continuously grab image from webcam stream and detect it. ********************************************************************/ const video = document.getElementById("webcam"); const canvasElement = document Demo: Detecting Images
Click on an image below to see the key landmarks of the face.
@@##@@
Demo: Webcam continuous face landmarks detection
Hold your face in front of your webcam to get real-time face landmarker detection.Click enable webcam below and grant access to the webcam if prompted.
以上就是在本地运行CodePen项目：解决外部依赖与模块导入问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537806.html
微信扫一扫 
支付宝扫一扫 
