Story2Sketch 使用指南

Story2Sketch 使用指南

story2sketch Convert Storybook into Sketch symbols 💎 项目地址: https://gitcode.com/gh_mirrors/st/story2sketch

项目目录结构及介绍

Story2Sketch 是一个用于将 Storybook 中的组件转换为 Sketch 符号的工具。以下是该项目的基本目录结构及其简要说明：

- `src`: 源代码目录，包含了主要的逻辑实现。
- `examples`: 示例工程目录，展示如何使用 Story2Sketch。
    - `core`: 具体示例工程，可参考其配置和用法。
- `babelrc`, `eslintrc`, `gitignore`, `prettierignore`, `yarnrc`: 配置文件，用来规范项目开发流程和环境设置。
- `CHANGELOG.md`: 更新日志，记录了项目每次版本迭代的重要变动。
- `LICENSE`: 许可证文件，说明该项目使用的开源协议。
- `README.md`: 项目的主要读我文件，介绍了项目的目的、安装方法、快速启动步骤等。
- `commitlint.config.js`: 提交信息规范配置。
- `package.json`: 包含项目的元数据，定义了脚本命令、依赖项等。
- `webpack.config.js`: 可能存在的Webpack配置文件（虽然项目是关于转换而非构建，但如果是有额外编译需求的话）。
- `yarn.lock`: Yarn包管理器锁定文件，确保团队成员安装相同的依赖版本。

## 项目的启动文件介绍

在 Story2Sketch 的上下文中，并没有直接提到“项目启动文件”作为一个独立的实体，因为它的核心功能是通过命令行工具执行的。不过，对于使用者来说，关键的“启动”行为是通过运行安装后的 `story2sketch` 命令来触发的。这意味着，从用户的视角看，“启动”指的是在命令行界面输入类似 `npm i story2sketch -g` 安装全局命令，随后通过 `story2sketch` 命令加上必要的参数来执行转换过程。

## 项目的配置文件介绍

### CLI 参数配置

- 用户可以通过 CLI 直接提供参数来定制转换过程，例如：
  ```shell
  story2sketch --url <Storybook iframe URL> --output <destination>.asketch.json

package.json 中的配置

可以在 scripts 部分添加自定义命令来简化调用，例如：

{
  "scripts": {
    "sketchify": "story2sketch --stories all --output dist/great-ui.asketch.json"
  }
}

之后只需运行 npm run sketchify 即可按配置进行操作。

story2sketch.config.js 文件

此外，项目支持创建一个本地配置文件 story2sketch.config.js 来预设常用选项：

module.exports = {
  output: "dist/great-ui.asketch.json",
  stories: "all",
};

这使得无需每次都指定相同参数，提高工作效率。

总的来说，尽管项目本身不强调传统意义上的“启动文件”，但通过上述配置和命令执行方式，实现了灵活的项目使用与配置。用户可以根据自己的需求，结合这些配置点，轻松地将 Storybook 组件转换成 Sketch 设计资源。

story2sketch Convert Storybook into Sketch symbols 💎 项目地址: https://gitcode.com/gh_mirrors/st/story2sketch