lanl0rd/js

多框架开发环境镜像文档

镜像概述

本Docker镜像集成了多种主流前端/后端框架的CLI工具、TypeScript、Yarn包管理器及http-server，旨在提供一站式Web应用开发环境，帮助开发者快速搭建开发环境，减少环境配置时间。

核心功能和特性

• 框架支持：包含多种主流框架CLI工具，如Angular、Nest、Express、React、Svelte、NX（Vue框架待支持）
• 开发工具：内置TypeScript，支持类型化开发
• 包管理：集成Yarn包管理器，高效管理项目依赖
• 静态服务：包含http-server，可快速预览静态文件

使用场景和适用范围

• 前端应用开发（React、Angular、Svelte等框架项目）
• 后端应用开发（Nest、Express等框架项目）
• 全栈项目快速原型开发
• 教学或演示环境搭建
• CI/CD流程中的开发或构建环境

使用方法和配置说明

基本使用

通过以下命令启动容器，将本地项目目录映射到容器内工作目录，并暴露端口用于应用预览：

bash
docker run -it -v $(pwd):/app -p 8080:8080 [镜像名称] /bin/bash

框架项目创建示例

Angular项目

bash
# 创建Angular项目
ng new my-angular-app
cd my-angular-app

# 启动开发服务器（需指定0.0.0.0允许外部访问）
ng serve --host 0.0.0.0 --port 8080

React项目

bash
# 创建React+TypeScript项目
npx create-react-app my-react-app --template typescript
cd my-react-app

# 启动开发服务器
yarn start --host 0.0.0.0 --port 8080

Nest项目

bash
# 创建Nest项目
nest new my-nest-app
cd my-nest-app

# 启动开发服务器
yarn start:dev --host 0.0.0.0 --port 8080

Svelte项目

bash
# 创建Svelte项目
npx degit sveltejs/template my-svelte-app
cd my-svelte-app

# 安装依赖
yarn install

# 启动开发服务器
yarn dev --host 0.0.0.0 --port 8080

静态文件预览

使用http-server快速预览静态文件：

bash
# 进入静态文件目录
cd /app/static-files

# 启动http-server（-c-1禁用缓存）
http-server -p 8080 -c-1

数据持久化

通过-v参数将本地项目目录挂载到容器内/app目录，确保项目文件在容器重启后仍可保留：

bash
docker run -it -v /本地项目路径:/app -p 8080:8080 [镜像名称] /bin/bash

工具版本查看

可通过以下命令查看已安装工具版本：

bash
# 查看TypeScript版本
tsc -v

# 查看Yarn版本
yarn -v

# 查看框架CLI版本（以Angular为例）
ng version