[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-webassembly-browser-c-to-wasm-tutorial-zh":3,"article-related-webassembly-browser-c-to-wasm-tutorial-zh":31,"series-tools-08d746ba-f428-4078-a652-afeab390810a":76},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":23,"views":27,"created_at":28,"published_at":29,"topic_cluster_id":30},"08d746ba-f428-4078-a652-afeab390810a","webassembly-browser-c-to-wasm-tutorial-zh","瀏覽器裡的 C-to-WASM 教學","\u003Cp data-speakable=\"summary\">一篇 \u003Ca href=\"\u002Fnews\u002Ffever-monique-billings-early-2026-impact-zh\">2026\u003C\u002Fa> 年 5 月的教學示範，如何在瀏覽器內用 C、Emscripten 和 \u003Ca href=\"\u002Ftag\u002Fgithub\">GitHub\u003C\u002Fa> Codespaces 完成 WebAssembly 開發、測試與部署。\u003C\u002Fp>\u003Cp>2026 年 5 月 12 日，\u003Ca href=\"https:\u002F\u002Ftowardsdatascience.com\u002F\" target=\"_blank\" rel=\"noopener\">Towards Data Science\u003C\u002Fa> 刊出 Luciano Abriata 的教學，主題是把第一個 WebAssembly 程式從 C 寫到上線，全程不離開瀏覽器。示範結合 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002F\" target=\"_blank\" rel=\"noopener\">GitHub\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffeatures\u002Fcodespaces\" target=\"_blank\" rel=\"noopener\">GitHub Codespaces\u003C\u002Fa> 和 \u003Ca href=\"https:\u002F\u002Femscripten.org\u002F\" target=\"_blank\" rel=\"noopener\">Emscripten\u003C\u002Fa>，\u003Ca href=\"\u002Fnews\u002Fbree-hall-returns-indiana-fever-player-development-zh\">最後\u003C\u002Fa>跑出一個「Hello WASM!」小程式。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>項目\u003C\u002Fth>\u003Cth>數值\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Publication date\u003C\u002Ftd>\u003Ctd>May 12, 2026\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Core tool\u003C\u002Ftd>\u003Ctd>Emscripten\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Cloud dev environment\u003C\u002Ftd>\u003Ctd>GitHub Codespaces\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Sample output\u003C\u002Ftd>\u003Ctd>Hello WASM!\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>發生了什麼\u003C\u002Fh2>\u003Cp>這篇教學的重點，不是再講一次 WebAssembly 是什麼，而是把流程拆到可操作。作者用 C 語言寫程式，再交給 Emscripten 編譯成 .wasm，外加瀏覽器需要的 .js 與 .html 檔。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779168232653-g8lb.png\" alt=\"瀏覽器裡的 C-to-WASM 教學\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>整個流程都在 Codespaces 裡完成，代表你只要有 GitHub 帳號和瀏覽器，就能開始。對第一次碰 WASM 的人來說，這比先裝本機工具鏈、再處理環境差異來得直接。\u003C\u002Fp>\u003Cp>教學步驟很像一條最短路徑：建立 repo、打開 Codespaces、寫 C 檔、在終端機安裝工具、編譯、再用 Python HTTP server 把頁面跑起來。最後看到的不是複雜框架，而是一個最小可用的 WASM 範例。\u003C\u002Fp>\u003Cul>\u003Cli>建立 GitHub repository 並開啟 Codespaces。\u003C\u002Fli>\u003Cli>在瀏覽器編輯器中撰寫 C 程式。\u003C\u002Fli>\u003Cli>安裝並啟用 Emscripten。\u003C\u002Fli>\u003Cli>編譯並透過本機伺服器載入 .wasm 頁面。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>這種寫法也反映出現在的 WebAssembly 教學趨勢：先讓人跑起來，再談效能與架構。對初學者而言，能在 10 分鐘內看到輸出，比先理解整套規格更重要。\u003C\u002Fp>\u003Ch2>為什麼重要\u003C\u002Fh2>\u003Cp>對開發者來說，WASM 的價值在於可重用既有的 C\u002FC++ 程式碼。很多科學計算、影像處理、資料分析核心邏輯已經寫好，而且通常經過多年優化，重寫成 JavaScript 反而成本更高。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779168227483-my5z.png\" alt=\"瀏覽器裡的 C-to-WASM 教學\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這也讓瀏覽器從「展示層」多了一個角色：它可以承接部分計算工作。UI 仍由 JavaScript 負責，但耗 CPU 的部分可以交給 WASM，這對互動式工具、線上模擬和教學 demo 特別實用。\u003C\u002Fp>\u003Cp>另一個實際影響是部署門檻下降。團隊不必先打包安裝檔、處理作業系統差異，直接丟一個連結就能讓別人試用，這對內部工具、課堂示範和快速驗證很省事。\u003C\u002Fp>\u003Cp>和純前端方案相比，WASM 不是要取代 JavaScript，而是補上它在效能上的空缺。對想把現有 C 工具搬到網頁的人，這類 browser-only 教學等於把第一步變得更短。\u003C\u002Fp>\u003Cp>真正的問題不是「WASM 能不能跑」，而是「哪些原本只能在桌面或伺服器上的工具，會先被搬進瀏覽器」。\u003C\u002Fp>\u003Cp>當編譯、測試、展示都能在 Codespaces 完成，入門成本就不再卡在環境設定。下一個競爭點，會是誰能把既有\u003Ca href=\"\u002Fnews\u002Fwebassembly-turns-native-code-into-web-modules-zh\">原生\u003C\u002Fa>程式碼更快地包成可分享的網頁工具。\u003C\u002Fp>","一篇 2026 年 5 月教學示範如何在 GitHub Codespaces 內，用 C、Emscripten 和瀏覽器完成 WebAssembly 開發、測試與部署。","towardsdatascience.com","https:\u002F\u002Ftowardsdatascience.com\u002Fyour-first-webassembly-program-and-web-app-written-tested-and-deployed-entirely-in-the-web-browser\u002F",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779168232653-g8lb.png","tools","zh","8c917808-bf7a-4d45-84a9-2e3d71a65e2b",[17,18,19,20,21,22],"WebAssembly","WASM","C語言","Emscripten","GitHub Codespaces","瀏覽器開發",[24,25,26],"教學示範了如何在瀏覽器內完成 C 到 WASM 的完整流程。","Emscripten 和 Codespaces 讓本機安裝幾乎不再是入門門檻。","對既有 C\u002FC++ 工具來說，WASM 提供了一條更容易上網頁的路。",12,"2026-05-19T05:23:23.991487+00:00","2026-05-19T05:23:23.928+00:00","c3c88dd2-a940-438a-b359-0e5a24562273",{"tags":32,"relatedLang":35,"relatedPosts":39},[33],{"name":17,"slug":34},"webassembly",{"id":15,"slug":36,"title":37,"language":38},"webassembly-browser-c-to-wasm-tutorial-en","WebAssembly in the Browser: a C-to-WASM tutorial","en",[40,46,52,58,64,70],{"id":41,"slug":42,"title":43,"cover_image":44,"image_url":44,"created_at":45,"category":13},"419deb6d-ea65-4fa7-9dd1-73763f373b53","bailian-token-plan-agent-credits-guide-zh","百炼Token Plan把Agent接入变简单","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783929835818-cyp6.png","2026-07-13T08:03:24.024727+00:00",{"id":47,"slug":48,"title":49,"cover_image":50,"image_url":50,"created_at":51,"category":13},"5c5c6733-6f41-49ca-b61e-c0a53399c327","one-api-gateway-turns-six-ai-apis-into-one-zh","一個閘道把六個 AI API 收成一套","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783883027640-gz6i.png","2026-07-12T19:03:22.171684+00:00",{"id":53,"slug":54,"title":55,"cover_image":56,"image_url":56,"created_at":57,"category":13},"953466bc-6d94-4ffe-944b-ac7728d09184","fde-playbook-fixes-broken-agent-projects-zh","FDE 讓烂尾 Agent 回正軌","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783881221882-yw1n.png","2026-07-12T18:33:16.193979+00:00",{"id":59,"slug":60,"title":61,"cover_image":62,"image_url":62,"created_at":63,"category":13},"bd3b5d5c-02d9-49c4-8ca4-dcb6df373374","ai-zaobao-template-daily-to-reusable-report-zh","AI 早报拆成可复用周报","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783879420413-rlwb.png","2026-07-12T18:03:11.617929+00:00",{"id":65,"slug":66,"title":67,"cover_image":68,"image_url":68,"created_at":69,"category":13},"33302498-49ec-4a00-8e2c-61b6f9fc3ece","claude-reflect-turns-usage-into-retention-zh","Claude Reflect 把使用變留存","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783793005956-n1ea.png","2026-07-11T18:03:01.486301+00:00",{"id":71,"slug":72,"title":73,"cover_image":74,"image_url":74,"created_at":75,"category":13},"5f08bf54-0ddb-4884-b541-75e33ad21b30","midjourney-turns-prompt-ideas-into-art-zh","Midjourney 把提示詞變成可重用流程","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1783694003831-eilt.png","2026-07-10T14:32:55.765266+00:00",[77,82,87,92,97,102,107,112,117,122],{"id":78,"slug":79,"title":80,"created_at":81},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":83,"slug":84,"title":85,"created_at":86},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":88,"slug":89,"title":90,"created_at":91},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":93,"slug":94,"title":95,"created_at":96},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":98,"slug":99,"title":100,"created_at":101},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":103,"slug":104,"title":105,"created_at":106},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":108,"slug":109,"title":110,"created_at":111},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":113,"slug":114,"title":115,"created_at":116},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":118,"slug":119,"title":120,"created_at":121},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00",{"id":123,"slug":124,"title":125,"created_at":126},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]