Parcel-Storybook 项目教程
1. 项目目录结构及介绍
parcel-story/
├── src/
│ ├── components/
│ ├── stories/
│ ├── index.html
│ └── index.js
├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
└── package.json
目录结构说明
- src/: 项目的源代码目录,包含所有前端代码。
- components/: 存放 React 组件的目录。
- stories/: 存放 Storybook 故事的目录。
- index.html: 项目的主 HTML 文件。
- index.js: 项目的主 JavaScript 文件。
- .babelrc: Babel 配置文件,用于配置 JavaScript 的转译。
- .gitignore: Git 忽略文件配置,指定哪些文件或目录不需要被 Git 管理。
- LICENSE: 项目的开源许可证文件。
- README.md: 项目的说明文档。
- package.json: 项目的配置文件,包含项目的依赖、脚本等信息。
2. 项目启动文件介绍
index.js
index.js
是项目的入口文件,负责初始化 React 应用并渲染到 index.html
中。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
index.html
index.html
是项目的主 HTML 文件,包含一个 div
元素,用于挂载 React 应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel Storybook</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
3. 项目配置文件介绍
package.json
package.json
是项目的配置文件,包含项目的依赖、脚本等信息。
{
"name": "parcel-storybook",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "cross-env NODE_ENV=development parcel src/index.html",
"build": "cross-env NODE_ENV=production parcel src/index.html"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"story-router": "^1.0.1"
},
"devDependencies": {
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.1.3",
"node-sass": "^4.7.2",
"parcel-bundler": "^1.7.0"
}
}
.babelrc
.babelrc
是 Babel 的配置文件,用于配置 JavaScript 的转译。
{
"presets": ["env", "react"],
"plugins": ["transform-class-properties"]
}
.gitignore
.gitignore
是 Git 忽略文件配置,指定哪些文件或目录不需要被 Git 管理。
node_modules/
dist/
.cache/
LICENSE
LICENSE
是项目的开源许可证文件,通常包含 MIT 许可证的内容。
README.md
README.md
是项目的说明文档,通常包含项目的介绍、安装步骤、使用说明等内容。
# Parcel-Storybook
Develop your components with parcel - A simple Alternative to storybook Using parceljs.
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/yjose/parcel-storybook.git
-
Install dependencies:
yarn install
-
Start the development server:
yarn start
License
This project is licensed under the MIT License.