この記事の最終更新日: 2023年4月16日
初始目录结构
.
└ docker
| └ Dockerfile
└ docker-compose.yml
Dockerfile
FROM node:19.8.1
WORKDIR /data/src
RUN npm install -g npm@latest && npm install -g vite@latest
docker-compose.yml
version: '3'
services:
app:
build: ./docker
container_name: front
tty: true
volumes:
- ./src:/data
ports:
- "5173:5173"
- "6006:6006"
创建React+TypeScript项目
在docker目录上运行以下命令:
$ docker-compose build
$ docker-compose run --rm app npm create vite@latest .
按’y’选择语言和构建设置,项目将被创建。
(base) react-ts % docker-compose run --rm app npm create vite@latest .
[+] Running 1/1
⠿ Network ln-sb_default Created 0.1s
Need to install the following packages:
create-vite@4.2.0
Ok to proceed? (y) y
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /data/src...
Done. Now run:
npm install
npm run dev
(base) react-ts %
在容器上运行npm install
启动Docker容器并进入容器。
然后执行npm install,npm run build和npm run dev。
$ docker-compose up -d
$ docker exec -it front sh
$ npm install
$ npm run build
$ npm run dev
React + TypeScript + Vite的项目现已完成。
http://localhost:5173/
引入StoryBook
接下来我们将引入StoryBook。
$ docker-compose up -d
$ docker exec -it front sh
启动容器后,输入执行命令。
$ npx sb@latest init
Need to install the following packages:
sb@7.0.2
Ok to proceed? (y)
$ npm run storybook
如果看到这样的输出,那么运行npm run storybook。
(在输入npx sb@latest init命令后需要等待一段时间,请耐心等待。)
使用npm run storybook构建完成后,将出现如下输出。
检查屏幕
http://localhost:6006/?path=/docs/example-button–docs
至此,项目创建已经完成。
如果您有任何问题,请随时在评论栏中留言。
大阪のエンジニアが書いているブログ。
コメント