阿里前端练习生结课项目
https://likefrost.github.io/Piano
git clone https://likefrost.github.io/Piano
cd Piano
yarn install
yarn start
本项目基于 React + icejs + Fusion Design
- 弹奏钢琴,记录用户操作历史
- 播放用户弹奏历史
- 播放用户输入的音乐
- 动态显示当前音频柱状图及随机音符
├─public //全局资源
│ ├─img
│ └─music
├─src
| ├─models //全局状态
| └─pages //页面
| | └─Dashboard
| | └─components //页面组件
| | | ├─InputMusic //输入音乐框
| | | ├─MusicDisplay //显示音乐组件
| | | ├─MusicWave //音乐可视化组件
| | | └─Piano //钢琴组件
| | ├─index.jsx //页面入口
| | └─index.module.scss
| ├─app.jsx //应用入口
| ├─global.css //全局css配置
| ├─routes.js //路由配置
| └─store.js //store
├─build.json // 工程配置
└─package.json
使用 eslint 规则,遵循阿里巴巴前端规范
命令行配置:
// package.json
"scripts": {
"lint": "npm run eslint && npm run stylelint",
"eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./",
"stylelint": "stylelint **/*.{css,scss,less}"
}
运行 lint 任务:
npm run lint
项目使用Github
的Action workflows
进行流水线自动部署,当从本地进行推送时自动运行构建程序,启动流水线使用yarn
打包构建,并将构建生成的文件推送到gh-pages
分支,以即时预览。
name: publish gh-page
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
with:
persist-credentials: false
- name: install and build
run: |
yarn install
yarn run build
- name: deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages
FOLDER: build