【亲测免费】 `react-movable` 教程

1. 项目目录结构及介绍

react-movable 的源代码组织如下：

.
├── README.md            # 主要说明文件
├── packages              # 包含主要的可发布模块（例如react-moveable）
│   └── ...
├── stories                # Storybook故事文件，用于演示组件
│   └── ...
├── .gitignore             # Git 忽略文件列表
├── package-lock.json      # NPM包锁定文件
├── package.json           # 主工程的package.json文件
└── ...                    # 其他支持文件和脚本

• packages: 存放核心模块和其他相关组件，如 react-moveable。
• stories: 使用Storybook维护的组件示例，方便开发者了解和测试组件功能。
• package.json: 项目的主配置文件，包含了依赖项、scripts等信息。

2. 项目启动文件介绍

react-movable 是一个库，其自身不包含独立运行的应用程序。但是，你可以通过npm run storybook命令来启动一个本地开发服务器，查看和测试react-movable提供的组件。这个命令会启动基于Storybook的服务器，该服务器位于packages/react-moveable/stories目录下。Storybook的配置文件通常在/.storybook目录下，但由于项目被管理为monorepo，具体的配置可能位于其他位置。

3. 项目的配置文件介绍

package.json

package.json 文件是整个项目的中心配置文件，它包括了以下关键部分：

• dependencies: 项目所依赖的包。
• devDependencies: 开发过程中使用的工具包。
• scripts: 提供了运行不同任务的脚本，比如npm run build用于构建项目，npm run storybook启动Storybook等。
• main: 指向库的主要入口文件，使得其他项目可以通过require或import引入。
• files: 列出项目中应该发布的文件。

为了运行项目，你需要先安装所有依赖，可以使用npm install或pnpm install命令。然后，根据需要执行相关的npm run脚本来构建、测试或启动服务。

请注意，由于react-movable是一个React库，所以大部分配置和设置都在源码和构建脚本中，而不是在显式的配置文件中，如webpack.config.js或.babelrc。这些配置通常是通过内部的工作流程工具自动化处理的，例如通过yarn工作流或lerna进行monorepo管理。

---

总结来说，react-movable 的重点在于其源码和如何在自己的React应用中使用。通过阅读源码、查看示例和运行storybook，开发者能够更好地理解并集成此库到他们的项目中。