快速开始

只需几步即可使用 Nasti 启动你的项目。

安装

npm install -D @nasti-toolchain/nasti

创建项目结构

Nasti 的项目结构与 Vite 一致：

my-project/
├── index.html          # 入口 HTML
├── src/
│   ├── main.tsx        # JS 入口
│   └── App.tsx
├── public/             # 静态资源
└── nasti.config.ts     # 配置文件（可选）

入口 HTML

在项目根目录创建 index.html：

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

启动开发

# 启动开发服务器
npx nasti dev

# 生产构建
npx nasti build

# 预览构建产物
npx nasti preview

添加配置（可选）

创建 nasti.config.ts：

import { defineConfig } from 'nasti-build'

export default defineConfig({
  framework: 'react',
  server: {
    port: 3000,
    host: true,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
})
TIP: Nasti 会自动检测框架类型。如果你的项目依赖了 react， 则自动启用 React 插件；依赖 vue 则启用 Vue 插件。

从 Vite 迁移

Nasti 兼容 Vite 插件，迁移非常简单：

  1. 将 vite 替换为 nasti-build
  2. 将 vite.config.ts 重命名为 nasti.config.ts
  3. 将 import { defineConfig } from 'vite' 改为 from 'nasti-build'
  4. 现有的 Vite 插件可以直接使用，无需修改