ArenaPro Creator

Appearance

NPM 包开发(一)：创建项目 ​

本章将指导你如何创建一个“神岛组件库”项目。

首先，让我们明确一个核心概念：“神岛组件库”就是一个标准的 NPM 包。它之所以特殊，只是因为它使用了一个由 ArenaPro 提供的官方模板来进行初始化。这个模板为你预设了所有正确的配置，确保你构建出的包能与 ArenaPro 的环境完美兼容。

创建流程 ​

整个创建过程非常简单，ArenaPro 的脚手架工具会为你处理绝大部分工作。

第 1 步：创建并打开一个空文件夹 ​

在你的电脑上，为你的新库创建一个空的文件夹。

⚠️ 命名规范：

  • 必须使用纯英文。
  • 推荐使用 kebab-case 风格 (小写字母加短横线)。
  • 包名需要是唯一的，如果你计划将其发布到 NPM 官方仓库。

例如，my-awesome-lib, arena-ui-kit。

创建好后，在 VS Code 中打开这个空文件夹。

第 2 步：运行项目创建命令 ​

  1. 按下 F1 (或 Ctrl+Shift+P / Cmd+Shift+P) 打开 VS Code 的命令面板。
  2. 输入 Arena-Ts 搜索相关命令。
  3. 选择 Arena-Ts: 新建Arena-Ts项目 (Create new Arena-Ts Project)。

第 3 步：选择“组件库”模板 ​

脚手架会询问你要创建哪种类型的项目。在这里，你必须选择 神岛组件库 (npm package)。

第 4 步：填写信息并等待安装 ​

接下来，脚手架会引导你填写 package.json 的基本信息（如版本号、描述等），你可以直接按回车使用默认值。

完成后，它会自动安装所需的依赖。当终端显示 “Done” 或类似的成功信息时，你的项目就创建完毕了！

脚手架为我们做了什么？ ​

创建完成后，你的项目目录看起来是这样的：

my-awesome-lib/
├── src/
│   └── index.ts
├── .gitignore
├── package.json
└── tsconfig.json

这个脚手架为你自动生成了几个核心文件：

  • package.json: 这是你 NPM 包的“身份证”。

    • name: 你的包名。
    • version: 版本号，每次发布更新时都需要手动提升。
    • main: 指向最终编译出的 JS 文件入口 (dist/index.js)。
    • types: 指向类型定义文件 (dist/index.d.ts)，这是让其他用户获得代码提示的关键。
    • files: 指定发布到 NPM 时，只包含 dist 目录，避免把源码等无关文件传上去。

  • tsconfig.json: TypeScript 配置文件。

    • 它被特别配置为“库模式”，最重要的设置是 declaration: true，这会让 tsc 在编译时自动生成 .d.ts 类型声明文件。

  • src/index.ts: 你库代码的入口文件。

    • 你在这个文件中 export 的所有内容，就是其他用户可以通过 import 从你的库中获取到的东西。

现在，你的项目已经具备了所有必要的配置文件和目录结构，可以开始编写你的库代码了。

上一篇：返回上一章：进阶指南

下一篇：第二步：编写与构建