React Simple Tree Menu 项目教程
1. 项目的目录结构及介绍
react-simple-tree-menu/
├── .circleci/
│ └── config.yml
├── storybook/
│ └── ...
├── src/
│ ├── components/
│ │ └── ...
│ ├── stories/
│ │ └── ...
│ └── index.js
├── .babelrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .stylelintrc.json
├── LICENSE
├── README.md
├── jest.config.js
├── jest.setup.js
├── package-lock.json
├── package.json
├── rollup.config.js
└── tsconfig.json
目录结构介绍
.circleci/
: 包含 CircleCI 的配置文件。storybook/
: 包含 Storybook 的配置和示例。src/
: 项目的源代码目录。components/
: 包含 React 组件的源代码。stories/
: 包含 Storybook 的故事文件。index.js
: 项目的入口文件。
.babelrc
: Babel 配置文件。.gitignore
: Git 忽略文件配置。.prettierignore
: Prettier 忽略文件配置。.prettierrc
: Prettier 配置文件。.stylelintrc.json
: Stylelint 配置文件。LICENSE
: 项目许可证。README.md
: 项目说明文档。jest.config.js
: Jest 测试配置文件。jest.setup.js
: Jest 测试设置文件。package-lock.json
: npm 依赖锁定文件。package.json
: 项目依赖和脚本配置文件。rollup.config.js
: Rollup 打包配置文件。tsconfig.json
: TypeScript 配置文件。
2. 项目的启动文件介绍
项目的入口文件是 src/index.js
。这个文件负责导出项目的主要组件和功能。
// src/index.js
import TreeMenu from './components/TreeMenu';
import './styles/main.css';
export default TreeMenu;
3. 项目的配置文件介绍
.babelrc
Babel 配置文件,用于转译 JavaScript 代码。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
package.json
项目依赖和脚本配置文件。
{
"name": "react-simple-tree-menu",
"version": "1.0.0",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
},
"devDependencies": {
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"typescript": "^4.3.5"
}
}
rollup.config.js
Rollup 打包配置文件,用于构建项目。
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from '@rollup/plugin-node-resolve';
import url from '@rollup/plugin-url';
import pkg from './package.json';
export default {
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
sourcemap: true
}
],
plugins: [