# 安装
> 在 Node.js、Deno、Bun 与 Vite + React 中搭建并验证 Effect v4 项目的完整指南。
环境要求：
- TypeScript 5.9 或更高版本。推荐使用 TypeScript 7，以获得最佳性能，并更好地兼容 [Effect 的 TypeScript 工具链](/docs/v4/getting-started/devtools/)。
- 支持 Node.js 22.18 或更高版本，以及 Deno 和 Bun。
Effect 4 目前是候选发布版本（release candidate），以 npm 上的 `rc` 标签发布。不带标签安装 `effect` 包会得到最新的稳定版本，也就是版本 3。请使用下面命令中展示的 `effect@rc` 标签来安装版本 4。
## 手动安装
### JavaScript 运行时
按照以下步骤，为 [Node.js](https://nodejs.org/)、[Bun](https://bun.sh/) 或 [Deno](https://deno.com/) 创建一个新的 Effect 项目：
1. 创建项目目录并进入该目录：
```sh
mkdir hello-effect
cd hello-effect
```
2. 初始化 TypeScript 项目：
```sh
npm init -y
npm install --save-dev typescript
```
```sh
pnpm init
pnpm add --save-dev typescript
```
```sh
yarn init -y
yarn add --dev typescript
```
```sh
bun init
```
```sh
deno init
```
这会创建一个 `package.json` 文件，作为 TypeScript 项目的初始配置。对于 Bun，这还会生成一个 `tsconfig.json` 文件；对于 Deno，则会生成一个 `deno.json` 文件。
请确保 `package.json` 文件中包含 `"type": "module"` 字段，这样 Node.js 就会把你的源文件视为 ES 模块（`bun init` 会自动添加该字段）：
```json
{
"type": "module"
}
```
3. 初始化 TypeScript：
```sh
npx tsc --init
```
```sh
pnpm tsc --init
```
```sh
yarn tsc --init
```
`bun init` 已经生成了 `tsconfig.json` 文件。
Deno 开箱即可运行 TypeScript，并且 `deno init` 已经生成了 `deno.json` 文件，其中默认启用了 `strict` 模式，无需再做其他配置。
运行该命令后，会生成一个包含 TypeScript 配置选项的 `tsconfig.json` 文件。其中最需要关注的选项之一就是 `strict` 标志。
请打开 `tsconfig.json` 文件，确认 `strict` 选项的值已设置为 `true`。
```json
{
"compilerOptions": {
"strict": true
}
}
```
4. 将所需的包安装为依赖项：
```sh
npm install effect@rc
```
```sh
pnpm add effect@rc
```
```sh
yarn add effect@rc
```
```sh
bun add effect@rc
```
```sh
deno add npm:effect@rc
```
这个包将为你的 Effect 项目提供基础功能。
接下来，我们编写并运行一个简单的程序，以确保一切配置正确。
在终端中执行以下命令：
```sh
mkdir src
touch src/index.ts
```
打开 `src/index.ts` 文件并添加以下代码：
```ts
import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
const result = Effect.runSync(program) // => undefined
```
运行 `src/index.ts` 文件。Node.js 22.18 或更高版本、Bun 以及 Deno 都能直接运行 TypeScript 文件，因此无需额外的工具链：
```sh
node src/index.ts
```
```sh
node src/index.ts
```
```sh
node src/index.ts
```
```sh
bun src/index.ts
```
```sh
deno run src/index.ts
```
如果你使用的是较旧版本的 Node.js，可以改用 [tsx](https://github.com/privatenumber/tsx) 运行该文件：`npx tsx src/index.ts`。
你应该会看到打印出 `"Hello, World!"` 消息。这说明程序运行正常。
### Vite + React
按照以下步骤，为 [Vite](https://vitejs.dev/guide/) + [React](https://react.dev/) 创建一个新的 Effect 项目：
1. 搭建 Vite 项目，打开终端并运行以下命令：
```sh
# npm 6.x
npm create vite@latest hello-effect --template react-ts
# npm 7+, extra double-dash is needed
npm create vite@latest hello-effect -- --template react-ts
```
```sh
pnpm create vite@latest hello-effect -- --template react-ts
```
```sh
yarn create vite@latest hello-effect -- --template react-ts
```
```sh
bun create vite@latest hello-effect -- --template react-ts
```
```sh
deno init --npm vite@latest hello-effect -- --template react-ts
```
该命令会创建一个使用 React 和 TypeScript 模板的新 Vite 项目。
2. 进入新建的项目目录并安装所需的包：
```sh
cd hello-effect
npm install
```
```sh
cd hello-effect
pnpm install
```
```sh
cd hello-effect
yarn install
```
```sh
cd hello-effect
bun install
```
```sh
cd hello-effect
deno install
```
包安装完成后，打开 `tsconfig.json` 文件，确保 `strict` 选项的值已设置为 true。
```json
{
"compilerOptions": {
"strict": true
}
}
```
3. 将所需的包安装为依赖项：
```sh
npm install effect@rc
```
```sh
pnpm add effect@rc
```
```sh
yarn add effect@rc
```
```sh
bun add effect@rc
```
```sh
deno add npm:effect@rc
```
这个包将为你的 Effect 项目提供基础功能。
现在，我们编写并运行一个简单的程序，以确保一切配置正确。
打开 `src/App.tsx` 文件，并将其内容替换为以下代码：
```diff
+import { useState, useMemo, useCallback } from "react"
import reactLogo from "./assets/react.svg"
import viteLogo from "/vite.svg"
import "./App.css"
+import { Effect } from "effect"
function App() {
const [count, setCount] = useState(0)
+ const task = useMemo(
+ () => Effect.sync(() => setCount((current) => current + 1)),
+ [setCount]
+ )
+
+ const increment = useCallback(() => Effect.runSync(task), [task])
return (
<>
Vite + React
+
count is {count}
Edit src/App.tsx and save to test HMR
Click on the Vite and React logos to learn more
)
}
export default App
```
完成这些修改后，运行以下命令启动开发服务器：
```sh
npm run dev
```
```sh
pnpm run dev
```
```sh
yarn run dev
```
```sh
bun run dev
```
```sh
deno run dev
```
然后按 **o** 键在浏览器中打开应用。
点击按钮后，你应该会看到计数器递增。这说明程序运行正常。