popcorn 的安装和配置教程

2025-05-17 10:39:44作者：凤尚柏Louis

1. 项目基础介绍和主要编程语言

popcorn 是一个开源项目，它允许在浏览器中运行客户端的 Elixir 语言，并且实现与 JavaScript 的互操作性。该项目目前处于早期阶段，可能会出现一些问题，如果遇到问题，可以报告一个 issue。项目欢迎贡献，但在投入大量工作之前，请先打开一个 issue。

该项目主要使用以下编程语言和框架：

Erlang
Elixir
HTML
JavaScript
Shell
CSS

2. 项目使用的关键技术和框架

popcorn 在内部使用 AtomVM，这是一个轻量级的 Erlang 虚拟机，使得 Elixir 代码能够在 Web 浏览器中运行。该项目还涉及到了 WebAssembly (WASM) 技术，它是一种可以在浏览器中运行的代码格式。

3. 项目安装和配置的准备工作及详细步骤

准备工作

在开始安装之前，请确保您的开发环境满足以下要求：

OTP 26.0.2
Elixir 1.17.3
Git

安装步骤

以下是在本地环境安装 popcorn 的详细步骤：

克隆项目到本地：

git clone https://github.com/software-mansion/popcorn.git
cd popcorn

添加项目依赖：

打开项目的 mix.exs 文件，并在 deps 函数中添加以下代码：
```
def deps do
  [
    {:popcorn, github: "software-mansion/popcorn"}
  ]
end
```

创建启动模块：

在 lib 目录下创建一个名为 MyApp.Start.ex 的文件，并添加以下内容：

defmodule MyApp.Start do
  def start do
    Popcorn.Wasm.register("main")
    IO.puts("Hello from WASM")
  end
end

注册启动模块和输出目录：

打开 config/config.exs 文件，并添加以下配置：

import Config

config :popcorn,
  start_module: MyApp.Start,
  out_dir: "static/wasm"

获取依赖并编译项目：

在项目根目录执行以下命令：
```
mix deps.get
mix popcorn.cook
```
这将在 static/wasm 目录下生成 WebAssembly 文件。

创建 HTML 文件：

创建一个 index.html 文件，并添加以下内容：

<!DOCTYPE html>
<html>
<script type="module">
  import { Popcorn } from "./wasm/popcorn.js";
  await Popcorn.init({onStdout: console.log});
</script>
<body>
</body>
</html>

运行 HTTP 服务器：

使用 mix popcorn.simple_server 生成一个简单的 HTTP 服务器脚本，并用 elixir server.exs 运行它。然后访问 http://localhost:4000，你将在控制台看到 "Hello from WASM" 的输出。

请确保使用支持 WebAssembly 的浏览器，并且如果使用其他 HTTP 静态文件服务器，需要设置正确的 HTTP 头部 Cross-Origin-Opener-Policy: same-origin 和 Cross-Origin-Embedder-Policy: require-corp。

登录后查看全文