分享一个可以在 Nodejs 和 browser 之间共享 js API 的工具

分享一个可以在 Nodejs 和 browser 之间共享 js API 的工具

https://github.com/kenspirit/webassemble

2 回复

分享一个可以在 Node.js 和 Browser 之间共享 JS API 的工具

在开发现代 Web 应用程序时，我们经常需要在 Node.js 后端和浏览器前端之间共享相同的逻辑。这可能包括数据处理、加密算法、文件操作等。为了实现这一目标，我们可以使用 WebAssembly 结合 Emscripten 工具链来编译 C/C++ 代码为可以在 Node.js 和浏览器中运行的二进制格式。

这里我将介绍一个简单的工具 webassemble，它可以帮助你更方便地实现这一目标。该工具提供了便捷的方式来编译 C/C++ 代码，并生成可以在 Node.js 和浏览器中使用的模块。

示例代码

首先，我们需要安装 webassemble 工具：

npm install -g webassemble

接下来，我们编写一个简单的 C 代码文件 example.c：

// example.c
int add(int a, int b) {
    return a + b;
}

然后，使用 webassemble 工具将其编译为 WebAssembly 模块：

webassemble compile example.c

这将会生成两个文件：example.js 和 example.wasm。

在 Node.js 中使用

现在，我们可以在 Node.js 中引入并使用这个模块：

const { add } = require('./example');

console.log(add(2, 3)); // 输出: 5

在浏览器中使用

同样地，我们也可以在浏览器中使用这个模块。假设你有一个 HTML 文件 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebAssembly Example</title>
</head>
<body>
    <script type="module">
        import { add } from './example.js';

        console.log(add(2, 3)); // 输出: 5
    </script>
</body>
</html>

更多信息

更多关于 webassemble 的详细信息可以查看其 GitHub 仓库。

通过这种方式，你可以轻松地在 Node.js 和浏览器之间共享复杂的计算逻辑，从而减少重复代码并提高开发效率。


在这个帖子中，我将介绍如何使用 esm 这个库来实现 Node.js 和浏览器之间共享 JavaScript API。esm 是一个可以让你在 Node.js 环境中使用 ES 模块（.mjs 文件或带有 "type": "module" 的 package.json）的库。

为什么选择 esm？

  • 统一模块系统：在 Node.js 中使用 ES 模块时，esm 可以帮助你直接使用 .js 文件作为 ES 模块，无需转换为 .mjs 文件。
  • 跨平台支持：通过在 Node.js 中使用相同的模块系统，你可以轻松地在浏览器和 Node.js 之间共享代码。

示例代码

  1. 创建一个基本的项目结构：
my-project/
├── package.json
└── src/
    └── index.js
  1. 初始化项目并安装 esm：
npm init -y
npm install esm
  1. 编写共享的 JavaScript API：

src/index.js:

export function greet(name) {
  return `Hello, ${name}!`;
}

export function add(a, b) {
  return a + b;
}
  1. 在 Node.js 中使用该 API：

index.js:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

// 使用 esm 加载 ES 模块
require('esm')(module);

// 导入共享的 API
import { greet, add } from './src/index.js';

console.log(greet('Alice')); // 输出: Hello, Alice!
console.log(add(2, 3));      // 输出: 5
  1. 浏览器环境中的使用：

为了在浏览器中使用相同的代码，你需要一个构建步骤，例如使用 Webpack 或 Rollup 来打包代码。这里不详细介绍打包步骤，但你可以使用这些工具来处理 ES 模块并在浏览器中运行。

结论

通过使用 esm，你可以在 Node.js 和浏览器之间共享相同的 JavaScript API，从而减少重复代码并提高开发效率。这使得维护和更新代码变得更加容易。

回到顶部