当前位置: 首页 > news >正文

将你的 Rust + WebAssembly 项目发布到 npm

一、准备工作:登录 npm

在发布之前,你需要:

  1. 拥有一个 npm 账号
    没有的话可前往 https://www.npmjs.com/signup 免费注册。

  2. 登录本地 npm 账户
    使用 wasm-pack 自带的登录命令:

    wasm-pack login
    

    它会提示你输入 npm token,登录成功后会在本地生成认证文件。

二、构建发布包

确保你当前在 wasm-game-of-life 项目根目录下。然后执行构建命令:

wasm-pack build

这一步会创建 pkg/ 目录,里面包含了:

  • 编译后的 .wasm 文件
  • JavaScript 包装器代码(包含 TypeScript 类型声明)
  • package.json(发布 npm 所需)

可以运行如下命令确认文件大小:

ls -lh pkg/

三、发布到 npm

现在,我们就可以发布包了!

wasm-pack publish

如果你是本系列教程的众多学习者之一,很可能看到类似错误:

error: package name "wasm-game-of-life" is already taken

这是因为该名称已经被别人注册。解决方法很简单:换个唯一的名字

四、修改包名,确保唯一性

打开项目中的 Cargo.toml 文件,找到 package.name 字段,添加你的用户名或项目标识后缀:

[package]
name = "wasm-game-of-life-yourname"

例如:

name = "wasm-game-of-life-haohao"

修改后,重新构建:

wasm-pack build

再发布一次:

wasm-pack publish

这一次,它就应该成功了 🎉

五、使用方式示例

一旦发布成功,你的包就可以通过 npm 安装了:

npm install wasm-game-of-life-haohao

然后在前端项目中使用:

import init, { Universe } from "wasm-game-of-life-haohao";

async function run() {
  await init(); // 初始化 wasm
  const universe = Universe.new();
  universe.tick();
  // ...
}

run();

六、温馨提示:版本控制和测试

  • 修改了代码后,别忘了更新 Cargo.toml 中的 version 字段,npm 不允许覆盖已有版本。
  • 可以使用 npm pack 来打包预览 .tgz 文件,进行测试发布。
  • 建议在发布前在项目中添加完整的 README,说明安装方法、使用 API、示例代码等。

七、总结

步骤说明
wasm-pack login登录 npm
wasm-pack build构建用于发布的 .wasm
修改 Cargo.toml确保包名唯一
wasm-pack publish正式发布

八、结语

通过本文,我们不仅压缩并优化了 .wasm 的构建产物,还成功将其发布到 npm,让更多开发者可以快速复用你高效的 Rust 模块。

未来,你可以把这种模式应用到图像处理、数据分析、音频处理等更多性能敏感型 Web 应用中,打造一个属于自己的高性能 .wasm 工具集。

如果你觉得这篇文章对你有帮助,欢迎点赞、分享、关注我,我们下次见 👋

相关文章:

  • 开源项目 | 17款云原生安全相关的扫描和平台类开源工具
  • 开关电源输出过冲抑制设计方法
  • 选导师原理
  • 无人机3S与4S电池技术对比!
  • 【数据结构】反射、枚举以及lambda表达式
  • Spring 框架源码
  • 【更新至2023年】2000-2023年中国气候政策不确定性指数(全国、省、市三个层面)
  • C# 13新特性 - .NET 9
  • linux命令七
  • 老龄化遇上数字化丨适老化改造:操作做“减法”,服务做“加法”
  • Guava Cache的refreshAfterWrite机制
  • CExercise_06_1递归_1汉诺塔_2对于n个盘子的汉诺塔问题,给定一个整数m,要求在控制台打印出m + 1步的移动轨迹。
  • 正则表达式和excel文件保存(python)
  • 《轨道力学讲义》——第七讲:交会对接技术
  • ros通信机制学习——latched持久化机制
  • 【深度学习基础】——机器的神经元:感知机
  • 提示工程指南学习记录(二)
  • 东方博宜OJ ——1335 - 土地分割
  • IDEA的常用设置(更新中......)
  • 云原生(Cloud Native)的详解、开发流程及同类软件对比
  • 中共中央台办、国务院台办在南京举办台商代表座谈会
  • 正义网评“一男两女举办婚礼”:“一夫多妻”流量闹剧该歇了
  • 昆明盘龙区一火灾调查报告公布:老人火盆取暖引燃房屋致身亡
  • 腾讯启动史上最大就业计划:三年新增2.8万个校招实习岗位,今年技术岗位占六成
  • 东南亚三国行第三日|中马将在人工智能、大熊猫保护、铁路等多领域深化合作
  • 丁薛祥:坚定发展信心,强化创新驱动,推动高质量发展行稳致远