搭建可复用的前端开发环境

··

13 min read

前言
一、运行时
二、包管理工具
三、包镜像源管理工具
四、前端环境搭建
五、环境问题trouble-shooting
六、使用GitHub Codespaces快速搭建前端项目的开发环境
附录

前言

在现代前端开发中，搭建一个高效且可复用的开发环境至关重要。无论你是初学者还是经验丰富的开发者，一个良好的开发环境不仅能提升工作效率，还能减少调试和配置的时间成本。本篇文章将详细介绍如何从零开始搭建一个全面的前端开发环境，涵盖运行时、包管理工具、镜像源管理、问题排查等多个方面，帮助你在开发过程中游刃有余。让我们一起探索如何打造一个强大且灵活的前端开发环境吧！

关键字

前端开发环境 (Frontend Development Environment)
运行时 (Runtime)
包管理工具 (Package Manager)
镜像源管理 (Registry Management)
问题排查 (Troubleshooting)

一、运行时

https://nodejs.org/en/download/package-manager

使用运行时版本管理工具nvm安装node

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 22

# verifies the right Node.js version is in the environment
node -v # should print `v22.5.1`

# verifies the right npm version is in the environment
npm -v # should print `10.8.2`

二、包管理工具

npm 是 Node.js 的包管理工具，用于安装、共享、发布和管理项目依赖。以下是一些常用的 npm 命令及其功能的简要介绍（tldr）：

基本命令

安装依赖包
- 本地安装（将包安装到项目的 node_modules 目录）：
```
  npm install <package-name>
```
  或
```
  npm i <package-name>
```
- 全局安装（将包安装到全局环境）：
```
  npm install -g <package-name>
```

移除依赖包

本地移除：
```
  npm uninstall <package-name>
```
全局移除：
```
  npm uninstall -g <package-name>
```

更新依赖包

本地更新：
```
  npm update <package-name>
```
全局更新：
```
  npm update -g <package-name>
```

查看已安装的包
- 本地查看：
```
  npm list
```
- 全局查看：
```
  npm list -g
```
查看依赖包信息
```
 npm info <package-name>
```
初始化项目
```
 npm init
```
或快速初始化：
```
 npm init -y
```

高级命令

安装指定版本的包

 npm install <package-name>@<version>

例如：

 npm install lodash@4.17.21

列出过时的包
```
 npm outdated
```
修复漏洞
```
 npm audit fix
```
运行测试
```
 npm test
```

运行自定义脚本 在 package.json 中定义脚本后，运行自定义脚本：

 npm run <script-name>

例如，在 package.json 中有如下脚本：

 "scripts": {
   "start": "node app.js",
   "build": "webpack --config webpack.config.js"
 }

运行脚本：

 npm run start
 npm run build

依赖管理

安装并保存为项目依赖

 npm install <package-name> --save

或简写：

 npm install <package-name> -S

安装并保存为开发依赖

 npm install <package-name> --save-dev

或简写：

 npm install <package-name> -D

安装并保存为可选依赖

 npm install <package-name> --save-optional

或简写：

 npm install <package-name> -O

安装并保存为对等依赖

 npm install <package-name> --save-peer

其他有用命令

清除缓存
```
 npm cache clean --force
```
显示帮助信息
```
 npm help
```
查看npm版本
```
 npm -v
```
查看node版本
```
 node -v
```

这些命令涵盖了大多数常见的 npm 使用场景，帮助你有效地管理项目依赖和脚本。

三、包镜像源管理工具

nrm (npm registry manager) 是一个用于管理和切换 npm 源的工具，它允许你在不同的 npm 镜像源之间快速切换。以下是 nrm 的简要介绍（tldr）及其常用命令：

安装 nrm

你可以通过 npm 全局安装 nrm：

npm install -g nrm

列出可用的 npm 源

nrm ls

这将显示当前配置的所有 npm 源，并标记当前正在使用的源。

切换 npm 源

nrm use <registry>

例如，要切换到淘宝的 npm 源：

nrm use taobao

测试 npm 源速度

nrm test

这将测试所有配置的 npm 源的响应速度，以帮助你选择最快的源。

添加新的 npm 源

nrm add <registry> <url>

例如，添加一个自定义的 npm 源：

nrm add custom https://custom.registry.com/

删除 npm 源

nrm del <registry>

例如，删除自定义的 npm 源：

nrm del custom

查看当前使用的 npm 源

nrm current

重新设置默认 npm 源

你可以使用 nrm 切换回官方的 npm 源：

nrm use npm

示例

假设你想在官方 npm 源和淘宝源之间切换，可以按照以下步骤操作：

列出所有可用的源：

 nrm ls

输出示例：

 * npm ----- https://registry.npmjs.org/
   yarn ---- https://registry.yarnpkg.com/
   taobao -- https://registry.npm.taobao.org/
   cnpm ---- http://r.cnpmjs.org/
   nj ------ https://registry.nodejitsu.com/
   skimdb -- https://skimdb.npmjs.com/registry

切换到淘宝源：
```
 nrm use taobao
```
验证当前使用的源：
```
 nrm current
```
测试所有源的速度：
```
 nrm test
```

使用 nrm，你可以方便地在不同的 npm 源之间切换，以找到最快和最稳定的源，提升包安装和更新的速度。

四、前端环境搭建

搭建前端开发环境是一个综合的过程，涉及多个工具和配置。以下是详细的步骤，包括必要的工具和配置：

1. 安装 Node.js 和 npm

首先，确保你已经安装了 Node.js 和 npm，这是前端开发的基础。

node -v
npm -v

2. 使用 nrm 切换 npm 源

如果你在中国，可以使用 nrm 切换到淘宝源以加快下载速度。

nrm use taobao

3. 安装常用的全局工具

a. npx

npx 已经包含在 npm 中，无需单独安装。它用于运行本地或全局安装的 npm 包。

b. yarn

Yarn 是另一个包管理工具，提供比 npm 更快和更稳定的体验。

npm install -g yarn

c. 前端框架CLI 工具

根据你使用的前端框架，安装相应的 CLI 工具。

Vue CLI：
```
  npm install -g @vue/cli
```
Create React App：
```
  npm install -g create-react-app
```
Angular CLI：
```
  npm install -g @angular/cli
```

4. 配置代码编辑器

a. VS Code

Visual Studio Code 是一个流行的代码编辑器，支持丰富的扩展和配置。

下载并安装 Visual Studio Code.
安装推荐的扩展：
- ESLint
- Prettier - Code formatter
- Live Server
- GitLens
- Vetur (for Vue.js)
- ESLint Plugin (for React)
- Angular Essentials (for Angular)

b. 配置代码格式化和 linting

创建或更新 .eslintrc 文件以配置 ESLint。
创建或更新 .prettierrc 文件以配置 Prettier。

在 VS Code 的 settings.json 中添加以下配置，以确保每次保存文件时自动格式化：

  {
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "prettier.requireConfig": true,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "es5"
  }

5. 初始化项目

根据使用的框架初始化项目。

Vue：

  vue create my-project
  cd my-project
  npm run serve

React：

  create-react-app my-project
  cd my-project
  npm start

Angular：

  ng new my-project
  cd my-project
  ng serve

6. 版本控制

使用 Git 进行版本控制。

初始化 Git 仓库：
```
 git init
```
创建 .gitignore 文件，忽略不需要的文件和文件夹。例如：
```
 node_modules/
 dist/
 .env
```

提交初始代码：

 git add .
 git commit -m "Initial commit"

7. 安装项目依赖

在项目根目录下安装所需的依赖：

npm install

或者：

yarn install

8. 配置 Webpack (可选)

如果需要自定义打包配置，可以手动配置 Webpack。

安装 Webpack 和相关依赖：

 npm install --save-dev webpack webpack-cli webpack-dev-server

创建 webpack.config.js 文件并添加基本配置：

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader'
         }
       }
     ]
   },
   devServer: {
     contentBase: './dist'
   }
 };

配置 package.json 中的脚本：

 "scripts": {
   "start": "webpack-dev-server --open",
   "build": "webpack"
 }

9. 环境变量配置

使用 .env 文件配置环境变量，确保在不同环境中使用不同配置。

创建 .env 文件：

 REACT_APP_API_URL=https://api.example.com

在代码中使用环境变量：

 const apiUrl = process.env.REACT_APP_API_URL;

10. 其他工具和配置

测试工具：如 Jest、Mocha、Chai 等，根据项目需求安装和配置。
样式工具：如 SASS、LESS、Styled-components，根据项目需求安装和配置。
状态管理工具：如 Redux、Vuex，根据项目需求安装和配置。

通过以上步骤，你可以搭建一个完整的前端开发环境，涵盖从基本工具到高级配置的各个方面，确保高效和高质量的开发体验。

五、环境问题trouble-shooting

在搭建前端开发环境时，可能会遇到各种问题。以下是一些常见问题的简要介绍（tldr）及其解决方法：

1. Node.js 和 npm 版本问题

问题：安装包时出现错误，提示 Node.js 或 npm 版本不兼容。

解决方法：

使用 nvm（Node Version Manager）管理和切换 Node.js 版本：
```
  nvm install <version>
  nvm use <version>
```
确认你安装的是最新版本的 npm：
```
  npm install -g npm@latest
```

2. 网络连接问题

问题：npm 安装速度慢，或者安装失败。

解决方法：

使用 nrm 切换到镜像源，如淘宝源：
```
  nrm use taobao
```

3. 权限问题

问题：全局安装 npm 包时出现权限错误。

解决方法：

使用 sudo 提升权限（仅限 Unix 系统）：
```
  sudo npm install -g <package-name>
```

更改 npm 的默认安装目录：

  mkdir ~/.npm-global
  npm config set prefix '~/.npm-global'
  export PATH=~/.npm-global/bin:$PATH
  echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.profile
  source ~/.profile

4. 项目依赖冲突

问题：安装项目依赖时出现版本冲突或兼容性问题。

解决方法：

删除 node_modules 目录和 package-lock.json 文件，然后重新安装依赖：
```
  rm -rf node_modules package-lock.json
  npm install
```
使用 yarn 作为包管理工具，yarn 具有更好的依赖解析机制：
```
  yarn install
```

5. ESLint/Prettier 配置问题

问题：代码格式化或 linting 不工作。

解决方法：

确认你已经安装了相应的 VS Code 扩展，如 ESLint 和 Prettier。
检查项目根目录下的 .eslintrc 和 .prettierrc 文件是否正确配置。

在 VS Code 设置中启用自动格式化：

  {
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "prettier.requireConfig": true
  }

6. Webpack 配置问题

问题：Webpack 打包失败或配置错误。

解决方法：

检查 webpack.config.js 文件中的配置是否正确，确保路径和 loader 配置无误。
查看控制台输出的错误信息，根据提示修改配置。
如果问题持续，可以尝试创建一个最小化的 Webpack 配置，只包含基本的入口和输出设置，逐步添加其他配置。

7. 版本控制问题

问题：.gitignore 文件未正确忽略文件或文件夹。

解决方法：

确保 .gitignore 文件位于项目根目录，并正确书写忽略规则。

如果文件已被 Git 跟踪，需要先移除再提交：

  git rm -r --cached <file-or-folder>
  git add .
  git commit -m "Update .gitignore"

8. 环境变量问题

问题：环境变量未正确加载或应用。

解决方法：

确认 .env 文件位于项目根目录，并正确定义变量。
在代码中使用 process.env.VARIABLE_NAME 访问环境变量。
使用 dotenv 包加载环境变量（如果未使用 CRA 或类似工具）：
```
  npm install dotenv
```
在项目入口文件中添加：
```
  require('dotenv').config();
```

9. 本地服务器问题

问题：开发服务器无法启动或访问。

解决方法：

检查开发服务器的配置，如端口设置和主机名。
确认没有其他进程占用相同端口。
查看终端输出的错误信息，排查配置或代码中的问题。

10. 浏览器兼容性问题

问题：在不同浏览器中出现样式或功能差异。

解决方法：

使用现代 CSS 重置工具，如 Normalize.css，确保一致的样式基础。
使用 Polyfill 提供对旧版浏览器的支持，例如 Babel 或 core-js。
在不同浏览器中测试应用，使用开发者工具排查问题。

通过这些步骤，你可以解决大多数前端开发环境搭建中遇到的问题，确保一个稳定高效的开发环境。

六、使用GitHub Codespaces快速搭建前端项目的开发环境

使用 GitHub Codespaces 快速搭建前端项目的开发环境非常方便，下面是详细的步骤：

1. 准备工作

确保你已经有一个 GitHub 账户，并且在本地安装了 Visual Studio Code（可选，如果你希望本地连接 Codespaces）。

2. 创建或选择一个仓库

创建一个新的 GitHub 仓库：
- 登录 GitHub，点击右上角的 + 按钮，选择 New repository。
- 输入仓库名称、描述，选择公开或私有，然后点击 Create repository。
选择一个已有的仓库：
- 打开你希望使用的已有仓库页面。

3. 配置 `.devcontainer`

在仓库的根目录创建一个 .devcontainer 文件夹，包含以下配置文件：

创建devcontainer.json 文件：

 {
   "name": "My Frontend Project",
   "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14",
   "extensions": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "formulahendry.auto-close-tag",
     "formulahendry.auto-rename-tag",
     "eamodio.gitlens",
     "streetsidesoftware.code-spell-checker"
   ],
   "settings": {
     "editor.formatOnSave": true,
     "editor.tabSize": 2
   },
   "postCreateCommand": "npm install"
 }

添加 Dockerfile（可选）：如果你需要更多自定义，可以添加一个 Dockerfile 来指定自定义的开发环境。
```
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14

 # 安装额外的依赖
 RUN npm install -g yarn
```

4. 启动 Codespace

从 GitHub 仓库页面启动：
- 打开仓库页面，点击 Code 按钮，然后选择 Codespaces 标签，点击 Create codespace on main（或选择其他分支）。
从 GitHub 主页启动：
- 点击你的头像，选择 Codespaces，然后点击 New codespace 按钮，选择仓库和分支。

5. 使用 Codespace

在浏览器中开发：
- Codespace 创建完成后，会自动在浏览器中启动 VS Code，你可以开始编写代码。
在本地 VS Code 中开发（可选）：
- 安装 GitHub Codespaces 扩展。
- 打开 VS Code，点击左侧活动栏中的 Remote Explorer 图标。
- 找到并连接到你的 Codespace。

6. 项目初始化

创建一个新的前端项目：根据你使用的前端框架，运行相应的命令初始化项目。

Vue.js：

  vue create my-project
  cd my-project
  npm run serve

React：

  npx create-react-app my-project
  cd my-project
  npm start

Angular：

  npx -p @angular/cli ng new my-project
  cd my-project
  ng serve

安装依赖：在项目根目录运行以下命令安装依赖：
```
 npm install
```

7. Git 和版本控制

初始化 Git 仓库：如果你的项目还没有初始化 Git 仓库，运行以下命令：
```
 git init
```
创建.gitignore 文件：忽略不需要的文件和文件夹，例如：
```
 node_modules/
 dist/
 .env
```

提交代码：提交初始代码：

 git add .
 git commit -m "Initial commit"

推送到远程仓库：确保你的远程仓库已配置，然后推送代码：
```
 git push origin main
```

8. 其他工具和配置

代码格式化和 Linting：
- 确认你已经安装了 ESLint 和 Prettier 扩展，并在项目中配置相应的文件：
  - .eslintrc.js 或 .eslintrc.json
  - .prettierrc 或 .prettierrc.json
环境变量配置：使用 .env 文件配置环境变量，确保在不同环境中使用不同配置。

9. 管理 Codespaces

停止或删除 Codespace：
- 在 GitHub 主页，点击你的头像，选择 Codespaces，你可以停止或删除不再需要的 Codespace。
查看资源使用情况：
- 在 Codespaces 页面，你可以查看每个 Codespace 的资源使用情况，并进行相应调整。

通过以上步骤，你可以快速搭建一个功能齐全的前端开发环境，利用 GitHub Codespaces 提供的便利性和高效性进行云端开发。

附录

Git版本管理

Git 是一个分布式版本控制系统，广泛用于源代码管理。以下是一些常见 Git 操作的简要介绍（tldr）：

1. 初始化和克隆仓库

初始化新仓库：

git init

克隆现有仓库：

git clone <repository-url>

2. 查看状态和日志

查看工作目录状态：

git status

查看提交历史：

git log

3. 添加和提交更改

添加文件到暂存区：

git add <file>  # 添加单个文件
git add .       # 添加所有更改的文件

提交更改：

git commit -m "Commit message"

4. 分支管理

创建新分支：

git branch <branch-name>

切换到指定分支：

git checkout <branch-name>

创建并切换到新分支：

git checkout -b <branch-name>

删除分支：

git branch -d <branch-name>  # 删除本地分支
git push origin --delete <branch-name>  # 删除远程分支

5. 合并和冲突解决

合并分支：

git merge <branch-name>

查看合并冲突：

git status

解决冲突后标记为已解决：

git add <resolved-file>
git commit

6. 远程仓库操作

查看远程仓库：

git remote -v

添加远程仓库：

git remote add <remote-name> <repository-url>

从远程仓库获取更新：

git fetch <remote-name>

推送更改到远程仓库：

git push <remote-name> <branch-name>

拉取远程仓库更新并合并：

git pull <remote-name> <branch-name>

7. 重置和撤销

撤销对文件的更改（未添加到暂存区）：

git checkout -- <file>

撤销对已添加到暂存区的文件的更改：

git reset HEAD <file>

撤销最后一次提交（保留更改）：

git reset --soft HEAD~1

永久删除提交（不保留更改）：

git reset --hard HEAD~1

8. 标签管理

创建标签：

git tag <tag-name>

推送标签到远程：

git push origin <tag-name>

删除标签：

git tag -d <tag-name>  # 删除本地标签
git push origin --delete <tag-name>  # 删除远程标签

9. 工作流示例I

创建和切换到新分支，提交更改：

git checkout -b <feature-branch>
# make changes
git add .
git commit -m "Add new feature"
git push origin <feature-branch>

发起 Pull Request：

在 GitHub 或其他托管平台上发起 Pull Request，将 feature-branch 合并到主分支。

通过这些基本操作，你可以高效地使用 Git 进行版本控制和协作开发。

git rebase 是一个重要的 Git 操作，用于将一个分支的更改移到另一个基准之上，以保持历史记录的整洁。以下是 git rebase 的简要介绍（tldr）以及如何将其应用到前面提到的工作流中：

10. 使用 `git rebase`

基本用法：

将当前分支的更改移到目标分支的最新提交上：

git rebase <base-branch>

交互式 Rebase（修改提交历史）：

git rebase -i <base-commit>

11. 工作流示例II

假设你正在开发一个新特性并已经创建了一个特性分支feature-branch，并且在 main 分支上有新的提交。你希望将 feature-branch 的更改基于 main 分支的最新提交。

切换到特性分支：
```
 git checkout feature-branch
```
执行 Rebase：
```
 git rebase main
```
这将把 feature-branch 上的更改移动到 main 分支的最新提交之后。
解决冲突（如果有）：
- 如果在 Rebase 过程中出现冲突，Git 会暂停并提示你解决冲突。
- 解决冲突后，使用 git add <file> 将已解决的文件标记为已解决。
- 继续 Rebase 过程：
```
  git rebase --continue
```
推送 Rebase 后的更改：

如果你已经推送过 feature-branch 到远程仓库，在进行 Rebase 后需要强制推送（因为历史记录已更改）：
```
 git push --force
```

额外操作

中止 Rebase 过程（如果发生问题）：

git rebase --abort

查看 Rebase 进度：

git rebase --show-current-patch

通过以上步骤，你可以有效地使用 git rebase 来保持分支的历史记录清晰，并将特性分支的更改基于最新的主分支提交。

Linux用户权限管理

在 Linux 中，用户和组管理是系统管理的重要部分。以下是一些常见的用户和组管理操作的简要介绍（tldr）：

1. 创建用户

命令：useradd 或 adduser

sudo useradd username
sudo adduser username  # 交互式创建用户

2. 删除用户

命令：userdel

sudo userdel username
sudo userdel -r username  # 删除用户及其主目录

3. 修改用户

命令：usermod

sudo usermod -aG groupname username  # 将用户添加到组
sudo usermod -d /new/home/dir username  # 修改用户主目录
sudo usermod -l newusername oldusername  # 修改用户名

4. 创建组

命令：groupadd

sudo groupadd groupname

5. 删除组

命令：groupdel

sudo groupdel groupname

6. 查看用户和组信息

命令：id，groups，getent

id username  # 查看用户的 UID、GID 和所属组
groups username  # 查看用户所属的组
getent passwd username  # 查看用户的详细信息
getent group groupname  # 查看组的详细信息

7. 修改用户密码

命令：passwd

sudo passwd username  # 为指定用户修改密码
passwd  # 为当前用户修改密码

8. 锁定和解锁用户账户

命令：usermod

sudo usermod -L username  # 锁定用户账户
sudo usermod -U username  # 解锁用户账户

9. 临时切换用户

命令：su，sudo，sudo -i

su - username  # 切换到指定用户
sudo -i  # 切换到 root 用户

10. 文件权限管理

命令：chown，chgrp，chmod

sudo chown username:groupname filename  # 修改文件所有者和组
sudo chgrp groupname filename  # 修改文件组
chmod 755 filename  # 修改文件权限

通过这些命令，你可以在 Linux 系统中高效地管理用户和组。

Docker

Docker 是一个开源的容器化平台，用于自动化应用程序的部署、扩展和管理。以下是 Docker 常用命令的简要介绍（tldr）：

1. 安装 Docker

安装 Docker（具体步骤可能因操作系统不同而有所不同）：

Linux：使用包管理工具安装，例如 apt、yum 等。
macOS 和 Windows：下载 Docker Desktop 安装包并按照提示进行安装。

2. Docker 基础命令

查看 Docker 版本：

docker --version

查看 Docker 服务状态：

sudo systemctl status docker

启动 Docker 服务：

sudo systemctl start docker

停止 Docker 服务：

sudo systemctl stop docker

3. 镜像管理

拉取镜像：

docker pull <image-name>

列出本地镜像：

docker images

删除镜像：

docker rmi <image-id>

构建镜像：

docker build -t <tag> <path-to-Dockerfile>

4. 容器管理

运行容器：

docker run <options> <image-name>

列出运行中的容器：

docker ps

列出所有容器（包括停止的）：

docker ps -a

停止容器：

docker stop <container-id>

启动已停止的容器：

docker start <container-id>

删除容器：

docker rm <container-id>

查看容器日志：

docker logs <container-id>

5. 容器和镜像操作

进入运行中的容器：

docker exec -it <container-id> /bin/bash

查看容器内的进程：

docker top <container-id>

查看容器的详细信息：

docker inspect <container-id>

6. 网络和数据管理

列出 Docker 网络：

docker network ls

创建 Docker 网络：

docker network create <network-name>

删除 Docker 网络：

docker network rm <network-name>

列出 Docker 卷：

docker volume ls

创建 Docker 卷：

docker volume create <volume-name>

删除 Docker 卷：

docker volume rm <volume-name>

7. Docker Compose

安装 Docker Compose：

Docker Compose 通常与 Docker Desktop 一起安装。也可以通过以下命令安装：

  sudo curl -L "https://github.com/docker/compose/releases/download/$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep tag_name | cut -d '"' -f 4)/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
  sudo chmod +x /usr/local/bin/docker-compose

使用 Docker Compose 启动服务：

docker-compose up

停止 Docker Compose 服务：

docker-compose down

查看 Docker Compose 日志：

docker-compose logs

通过这些基本命令，你可以高效地使用 Docker 进行容器化应用的管理和部署。

Dev Containers

Dev Containers 是一种在 Visual Studio Code 中定义和管理开发环境的方法。通过使用 Dev Containers，你可以确保团队中的所有开发人员使用一致的开发环境，从而减少环境配置问题。以下是 Dev Containers 的简要介绍（tldr）：

1. 什么是 Dev Containers?

Dev Containers 允许你在容器中定义开发环境，通常通过 Docker 来实现。它们包括所有必要的工具、依赖项和设置，从而确保开发环境的一致性。

2. 创建 Dev Container

步骤：

在项目中创建.devcontainer 目录：在你的项目根目录下创建一个 .devcontainer 目录，用于存放 Dev Container 配置文件。

添加devcontainer.json 文件：在 .devcontainer 目录中创建一个 devcontainer.json 文件，定义容器的配置。

示例devcontainer.json：

 {
   "name": "Node.js & TypeScript",
   "dockerFile": "Dockerfile",
   "extensions": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ],
   "settings": {
     "editor.formatOnSave": true
   },
   "postCreateCommand": "npm install"
 }

创建Dockerfile（可选）：如果你需要自定义容器环境，可以创建一个 Dockerfile 文件来指定容器的基础镜像和安装额外的软件包。

示例Dockerfile：
```
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14

 # 安装额外的依赖
 RUN npm install -g typescript
```

3. 使用 Dev Containers

在 VS Code 中打开 Dev Container：

打开 VS Code。
从命令面板启动 Dev Container：
- 使用快捷键 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）打开命令面板。
- 输入并选择 Remote-Containers: Reopen in Container。
VS Code 会自动构建并启动 Dev Container：
- VS Code 会构建 Docker 容器并打开该容器中的工作目录，你现在可以在容器中开发代码。

4. 其他操作

更新 Dev Container 配置：

更新 devcontainer.json 或 Dockerfile 后，可以通过 Remote-Containers: Rebuild Container 命令重建容器以应用更改。

删除 Dev Container：

在 VS Code 的 Remote Explorer 视图中，选择 Remove 操作来删除不再需要的容器。

共享 Dev Container 配置：

将 .devcontainer 目录添加到版本控制系统（如 Git）中，以便团队成员可以使用相同的开发环境。

5. 故障排除

容器无法启动或构建失败：

检查 Dockerfile 和 devcontainer.json 的配置是否正确。
查看 VS Code 的 Remote-Containers 输出日志以获取更多信息。

容器中缺少工具或依赖：

更新 Dockerfile 或 devcontainer.json 文件，确保安装了所需的工具和依赖，然后重新构建容器。

通过这些步骤，你可以快速设置和使用 Dev Containers，为开发团队提供一致的开发环境，并简化开发过程。

GitHub Codespaces简介

GitHub Codespaces 是一个基于云的开发环境，允许你在任何地方使用 VS Code 开发代码。以下是 GitHub Codespaces 的简要介绍（tldr）及其常用操作：

1. 创建 Codespace

从 GitHub 仓库创建 Codespace：

打开你想要创建 Codespace 的仓库。
点击 Code 按钮，然后选择 Create codespace on main（或选择其他分支）。

从 GitHub 首页创建 Codespace：

点击你的头像，选择 Codespaces。
点击 New codespace 按钮，然后选择一个仓库。

2. 配置 Codespace

配置开发环境：

你可以在仓库的 .devcontainer 目录中添加配置文件来定义 Codespace 的开发环境，包括基础镜像、扩展、工具等。

示例.devcontainer/devcontainer.json：

{
  "name": "My Codespace",
  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14",
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ],
  "settings": {
    "editor.formatOnSave": true
  }
}

3. 使用 Codespace

启动 Codespace：

一旦 Codespace 创建完成，GitHub 会自动在浏览器中启动 VS Code，你可以开始编写代码。

连接本地 VS Code 到 Codespace：

安装 VS Code 和 GitHub Codespaces 扩展。
打开 VS Code，点击左侧活动栏中的 Remote Explorer 图标。
找到并连接到你的 Codespace。

4. 管理 Codespaces

列出所有 Codespaces：

在 GitHub 主页，点击你的头像，选择 Codespaces 查看你所有的 Codespaces。

停止或删除 Codespace：

在 Codespaces 页面，可以停止、重命名或删除你不再需要的 Codespace。

5. 使用 Git 和 GitHub

常用 Git 命令：

Codespaces 内置 Git，你可以在终端中使用常规 Git 命令：

  git status
  git add .
  git commit -m "Initial commit"
  git push origin main

GitHub 扩展：

你还可以使用 GitHub 提供的 VS Code 扩展进行 Pull Request 管理、代码审查等。

6. 终端和任务

打开终端：

在 VS Code 中使用 Ctrl + （反引号）或通过菜单 Terminal > New Terminal 打开内置终端。

运行任务：

你可以在 Tasks > Run Task 中运行预定义的任务，例如构建、测试等。

7. 使用 Dev Containers

定义 Dev Container：

Dev Container 文件位于 .devcontainer 目录，通过配置该文件，Codespace 会自动为你创建和配置开发环境。

8. 资源管理

检查和调整资源：

GitHub 提供不同的资源配置（CPU、内存等），你可以在创建 Codespace 时进行选择。

查看使用情况：

在 Codespaces 页面，你可以查看每个 Codespace 的资源使用情况。

通过以上步骤和操作，你可以有效地使用 GitHub Codespaces 进行云端开发，实现随时随地的高效开发体验。

Frontend Development Environment Registry Management 前端开发环境运行时包管理工具镜像源管理 package manager runtime troubleshooting 问题排查

搭建可复用的前端开发环境

Table of contents

前言

一、运行时

二、包管理工具

基本命令

高级命令

依赖管理

其他有用命令

三、包镜像源管理工具

安装 nrm

列出可用的 npm 源

切换 npm 源

测试 npm 源速度

添加新的 npm 源

删除 npm 源

查看当前使用的 npm 源

重新设置默认 npm 源

示例

四、前端环境搭建

1. 安装 Node.js 和 npm

2. 使用 nrm 切换 npm 源

3. 安装常用的全局工具

a. npx

b. yarn

c. 前端框架CLI 工具

4. 配置代码编辑器

a. VS Code

b. 配置代码格式化和 linting

5. 初始化项目

6. 版本控制

7. 安装项目依赖

8. 配置 Webpack (可选)

9. 环境变量配置

10. 其他工具和配置

五、环境问题trouble-shooting

1. Node.js 和 npm 版本问题

2. 网络连接问题

3. 权限问题

4. 项目依赖冲突

5. ESLint/Prettier 配置问题

6. Webpack 配置问题

7. 版本控制问题

8. 环境变量问题

9. 本地服务器问题

10. 浏览器兼容性问题

六、使用GitHub Codespaces快速搭建前端项目的开发环境

1. 准备工作

2. 创建或选择一个仓库

3. 配置 .devcontainer

4. 启动 Codespace

5. 使用 Codespace

6. 项目初始化

7. Git 和版本控制

8. 其他工具和配置

9. 管理 Codespaces

附录

Git版本管理

1. 初始化和克隆仓库

2. 查看状态和日志

3. 添加和提交更改

4. 分支管理

5. 合并和冲突解决

6. 远程仓库操作

7. 重置和撤销

8. 标签管理

9. 工作流示例I

10. 使用 git rebase

11. 工作流示例II

Linux用户权限管理

1. 创建用户

2. 删除用户

3. 修改用户

4. 创建组

5. 删除组

6. 查看用户和组信息

7. 修改用户密码

8. 锁定和解锁用户账户

9. 临时切换用户

10. 文件权限管理

3. 配置 `.devcontainer`

10. 使用 `git rebase`