前端工程师Mac配置

立风77
569 阅读13分钟

1、Homebrew

官网：brew.sh/

image.png

作用：

Homebrew提供了一个简洁的命令行界面，使用户能够通过几个简单的命令轻松管理软件包。此外，Homebrew还能够自动处理软件包之间的依赖关系，简化了复杂的安装过程。使用Homebrew，用户可以通过一条简单的命令轻松安装所需的软件包，而不必手动下载、编译和设置它们。同时，Homebrew还提供了更新和卸载软件包的功能，使得软件管理变得更为便捷。

  1. 填补空白：‌Homebrew填补了macOS系统自带的包管理工具的空白，‌通过用户友好的命令行界面，‌提供了大量的软件包（‌formulae）‌，‌允许用户轻松地安装和维护各种开源软件、‌应用程序和开发工具。‌
  2. 简单性：‌Homebrew使得安装和管理Unix工具和应用变得非常容易。‌
  3. 集成：‌安装通过Homebrew安装的软件通常会自动处理依赖关系和配置，‌让用户无需手动干预。‌
  4. 自动化：‌Homebrew提供一种自动化的方式来编译和安装软件，‌通常只需一个简单的命令。‌
  5. 社区支持：‌由于Homebrew是开源的，‌有一个活跃的社区维护和添加新的“公式”（‌即软件包的安装脚本）‌
  6. 更新与升级：‌Homebrew使得软件包的更新和升级过程变得非常简单。‌
  7. 与macOS集成：‌Homebrew安装的软件存放在/usr/local目录下，‌不会干扰macOS系统自带的软件。‌
安装：
方式一：复制官网链接到终端
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

image.png

方式二：下载最新homebrew.pkg github.com/Homebrew/br…

image.png

ps：在使用 brew install 安装软件的过程中，经常会遇到安装缓慢、卡死的情况，这大多是由于 Homebrew 的默认安装源位于国外，国内访问速度慢造成的。

也可能会出现各种报错，belike:

error: RPC failed; curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8) error: 4928 bytes of body are still expected fetch-pack: unexpected disconnect while reading sideband packet fatal: early EOF fatal: fetch-pack: invalid index-pack output Failed during: /usr/bin/git fetch --force origin

方式三：通过清华镜像源下载 (推荐使用) mirrors.tuna.tsinghua.edu.cn/help/homebr…
  • 首先，需要确保系统中安装了 bash、git 和 curl，对于 macOS 用户需额外要求安装 Command Line Tools (CLT) for Xcode
xcode-select --install

image.png

  • 接着，在终端输入以下几行命令设置环境变量
export HOMEBREW_INSTALL_FROM_API=1
export HOMEBREW_API_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles/api"
export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles"
export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git"
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git"

image.png

  • 最后，在终端运行以下命令以安装 Homebrew(从本镜像下载安装脚本并安装 Homebrew)
git clone --depth=1 https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/install.git brew-install
/bin/bash brew-install/install.sh
rm -rf brew-install

image.png

image.png

  • 安装成功后需将 brew 程序的相关路径加入到环境变量中：
test -r ~/.bash_profile && echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.bash_profile
test -r ~/.zprofile && echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile

image.png

  • 查看homebrew版本
brew -v

image.png

2、NVM

官网：github.com/nvm-sh/nvm

image.png

作用：

nvm的主要作用是管理和切换多个版本的Node.js。‌

nvm，‌全称为node.js version management，‌即Node.js版本管理工具，‌它的核心功能在于允许用户在同一台电脑上安装和管理多个版本的Node.js。‌这在开发环境中尤为重要，‌因为不同的项目可能需要不同版本的Node.js来运行。‌通过nvm，‌开发者可以轻松地切换不同版本的Node.js，‌而无需卸载当前版本后再安装新版本，‌从而大大简化了版本切换的流程，‌减少了出错的可能性，‌并显著提高了工作效率12。‌

具体来说，‌nvm的作用包括：‌

  • 简化版本管理：‌通过nvm，‌开发者可以随时通过一行命令切换到任何已安装的Node.js版本，‌无需进行繁琐的卸载和重新安装操作。‌
  • 支持多版本共存：‌在同一台机器上，‌可以同时安装并运行多个版本的Node.js，‌这对于需要兼容不同项目需求的开发环境尤为重要。‌
  • 提高开发效率：‌减少了因版本切换而浪费的时间，‌使得开发者能够更专注于项目的开发和维护。‌
安装：
  • 下载nvm前，要把node卸载干净
#查看已经安装在全局的模块，以便删除这些全局模块后再按照不同的 node 版本重新进行全局安装
npm ls -g --depth=0

#删除全局 node_modules 目录
sudo rm -rf /usr/local/lib/node_modules

#删除 node
sudo rm /usr/local/bin/node

#删除全局 node 模块注册的软链
cd /usr/local/bin && ls -l | grep "../lib/node_modules/" | awk '{print $9}'| xargs rm
  • 检验是否卸载完成
#查看npm是否卸载
npm -v

#查看node是否卸载
node -v

image.png

  • 使用homebrew安装git
//安装git
brew install git

//查看git版本
git –v

image.png

image.png

  • 使用homebrew安装curl
brew install curl
  • 下载并运行nvm安装脚本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
  • 添加nvm环境变量
//打开 ~/.bash_profile文件
open -e ~/.bash_profile

这个时候，会出现文件锁定的问题。

image.png 解决办法：

//把下面的username替换成你自己的用户名
/usr/bin/sudo /bin/chmod u+rwx /Users/username/.bash_profile
/usr/bin/sudo /usr/sbin/chown username /Users/username/.bash_profile

//进行编辑
sudo vim -e ~/.bash_profile

image.png 输入e,然后回车

image.png 输入 visual ,然后回车

i编辑文件，添加以下代码后保存退出:wq：

export NVM_DIR="$HOME/.nvm" 
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
  • 重新加载终端配置，使修改的配置生效
source ~/.bash_profile
  • 验证nvm的安装
nvm -v

image.png

3、Node.js

官网：nodejs.org/en/

image.png

作用：

Node.js是一个基于Chrome V8引擎的JavaScript运行时，它可以在服务器端运行JavaScript代码。Node.js采用事件驱动、非阻塞I/O模型，可以处理大量并发连接，使得网络应用程序可以快速响应请求。

  1. 高性能和可扩展性：Node.js采用非阻塞I/O模型，使得它在执行网络请求等任务时不会阻塞其他任务的执行，特别适用于构建高性能和可伸缩的Web应用程序。这种模型对于处理高并发请求表现出色，非常适合构建实时应用、聊天应用、在线游戏等性能要求高的应用。
  2. 跨平台性：Node.js可以在不同操作系统上运行，包括Windows、macOS和Linux，这使得开发者可以轻松地在这些平台上开发和部署应用。
  3. 全栈开发：Node.js使用JavaScript语言，这使得前端开发者可以利用相同的语言编写客户端和服务器端代码，简化学习曲线。学习Node.js可以让前端开发者成为JavaScript全栈工程师，既能处理前端又能处理后端开发。
  4. 构建服务器端应用：Node.js是一个服务器端运行时环境，可以用于构建服务器端应用程序。这意味着开发者可以不仅仅局限于构建用户界面，还可以创建服务器、处理数据、实现用户认证等等。
  5. 广泛的社区支持和生态系统：Node.js拥有庞大的社区支持，有大量的开源库和模块可供使用。这意味着开发者可以更快地开发应用程序，因为可以重用其他开发者创建的模块和解决方案。
  6. 工具和构建流程：Node.js提供了各种工具和框架，用于自动化前端开发工作流程，包括构建、测试、部署等，有助于提高生产力。
  7. 服务端渲染：Node.js在服务端渲染方面非常有用。可以使用Node.js构建服务器端渲染应用，提供更快的加载速度和更好的SEO表现，同时保留了前端技能。
安装：
  • 使用nvm安装node.js
nvm install node
  • 查看已安装的node.js版本号
nvm ls

image.png

  • 使用以下命令切换使用node.js版本
nvm use node_version

4、npm

官网：www.npmjs.com/

image.png

作用：

npm的主要作用是作为Node.js的包管理工具，方便开发者进行代码复用、代码分析、项目依赖包管理等。

npm，全称Node Package Manager，是Node.js的官方包管理工具，也是JavaScript生态系统中最流行的包管理工具之一。它提供了一个平台，使得开发者可以方便地安装、更新和删除项目的依赖包。npm的生态系统是全球最大的模块生态系统之一，里面所有的模块都是开源免费的，相当于Java中的Maven、Python中的PIP。通过npm，开发者可以轻松地将Node.js软件包添加到他们的应用程序中，并进行管理，如下载、删除、更新、查看版本号等操作。npm没有用户界面，需要在命令行中通过命令的方式使用，对应的命令就是npm。

npm的作用还包括：

  • 代码复用：开发者可以通过npm安装其他开发者发布的模块，从而避免重复造轮子，提高开发效率。
  • 代码分析：npm不仅管理包的安装，还提供了查看包信息、依赖树等功能，帮助开发者更好地理解和管理项目的依赖关系。
  • 项目依赖包管理：通过npm，开发者可以轻松地管理项目的依赖包，确保项目在不同环境下的可复现性和一致性。
安装：

如果你已经安装了node.js，那么npm也已安装。

  • 查看npm版本
npm -v

image.png

5、Bun

官网：bun.sh/

image.png

作用：

Bun是一个全新的JavaScript运行时，‌旨在服务于现代JavaScript生态系统。‌ 它具有三个主要的设计目标：‌

  1. 速度：‌Bun启动快速，‌运行速度快。‌它扩展了JavaScriptCore，‌这是一个为Safari构建的性能导向的JS引擎。‌这意味着应用程序和API的快速启动时间。‌
  2. 优雅的API：‌Bun提供了一组最小化的高度优化的API，‌用于执行常见任务，‌如启动HTTP服务器和编写文件。‌
  3. 统一的开发体验(DX) ：‌Bun是构建JavaScript应用程序的完整工具包，‌包括包管理器、‌测试运行器和打包工具。‌它被设计为Node.js的即插即用替代品，‌本地实现了数百个Node.js和Web API，‌包括fs、‌http等。‌
安装：
  • 安装
curl -fsSL https://bun.sh/install | bash
source /root/.bashrc

或

 npm i -g bun
  • 确认安装
exec /bin/zsh
bun --help

image.png

6、对比npm, pnpm, yarn, bun

效率（速度）：

bun > pnpm, yarn > npm

  • npm：‌尽管 npm 提供了丰富的包管理和生态系统，‌但其速度相对较慢，‌尤其是在大型项目中。‌npm 的依赖关系分配方式是嵌套安装，‌每个模块都有自己的依赖关系，‌这可能会导致文件的重复以及一些其他的问题1。‌此外，‌npm 的并行安装能力较弱，‌主要依赖串行安装方式，‌这在一定程度上限制了其效率2。‌
  • Yarn：‌以其安装速度而闻名，‌Yarn 使用并行化处理代码以提高效率，‌并且可以缓存已经下载过的包，‌从而不必每次都从网络获取。‌Yarn 使用扁平式依赖管理模式，‌尽可能地减少依赖包的重复并且减小整体安装包大小。‌此外，‌Yarn 的 yarn.lock 文件能更好地对依赖关系版本进行清晰管理，‌从而一定程度上提升了安全性1。‌
  • pnpm：‌pnpm 的速度与 Yarn 相当，‌甚至更快。‌它使用了一种高效的磁盘空间管理策略，‌通过“硬链接”和“文件复用”技术，‌极大地减少了磁盘占用和安装时间，‌即使在大型项目中也表现出色。‌pnpm 通过使用一个全局存储的方式来安装和管理包，‌将每个版本的每个模块只存储一次，‌然后通过链接的方式将这些模块链接到你的项目中。‌这样做可以减少磁盘空间的使用和加快依赖的解析速度13。‌
  • Bun 速度很快，启动速度比 Node.js快4 倍。这种差异仅在运行 TypeScript 文件时才会被放大，该文件需要转译才能由 Node.js 运行
空间占比大小：

bun > npm, yarn > pnpm

  • npm是Node.js的官方包管理器，‌它下载并安装项目的所有依赖，‌包括整个依赖树，‌这可能会导致较大的磁盘空间占用。‌npm安装包的项目中，‌会生成两个文件，‌package.json和package-lock.json，‌其中package-lock.json文件负责版本锁定，‌确保依赖的可复现性1。‌
  • yarn和npm类似，‌也会下载并安装项目的所有依赖，‌包括整个依赖树，‌因此也会有较大的磁盘空间占用。‌Yarn提供了一些额外的功能，‌如缓存、‌自动解析和自动重试等，‌这些功能可以提高开发效率2。‌
  • pnpm则通过一种不同的机制来减少磁盘空间占用。‌它只下载必需的模块，‌而不是整个依赖树，‌从而显著减少了磁盘空间占用。‌此外，‌pnpm还可以使用硬链接来进一步减少空间占用。‌硬链接是多个文件名指向同一个文件的实际内容，‌而软链接（‌符号链接）‌是一个独立的文件，‌指向另一个文件或目录的路径。‌这种机制使得在项目中需要使用到依赖的时候，‌pnpm只会安装一次，‌之后再次使用都会直接硬链接指向该依赖，‌极大节省磁盘空间，‌并且加快安装速度23。‌
工作原理：

npm, yarn, pnpm, bun都是软件包管理器，它们的主要目的是简化在项目中添加、更新和删除依赖的过程。

  • npm:

    npm是Node.js的官方包管理器。它是一个命令行工具，用于安装和管理Node.js应用程序的依赖项。npm提供了一个注册表，开发者可以在其中存储和共享代码，也可以通过npm安装其他人的代码。

  • yarn:

    yarn是一个快速、可靠的依赖管理工具。它主要的目标是提高开发者的效率，它能够并行地安装包，以减少安装时间。

  • pnpm:

    pnpm是另一种软件包管理器，它采用了一种创新的存储方式，可以减少磁盘空间的使用，并且提高安装速度。pnpm通过使用符号链接和内容可寻址的存储来实现这一点。

  • bun:

    bun是一个新兴的包管理器，它旨在提供一个快速、安全、可靠的包管理解决方案。

7、iTerm2

官网：iterm2.com/

image.png

作用：
  • iTerm2 是 macOS 上最流行的开源终端工具之一，它源自并基本上取代了早期的 “iTerm” 应用程序。
  • iTerm2 是 Mac 默认终端的替代品，也是目前 Mac 系统下最好用的终端工具，集颜值和效率于一身。
  • iTerm2 支持操作系统功能，如窗口透明度、全屏模式、分割窗格、Exposé 标签、Growl 通知和标准键盘快捷键。其他功能包括可定制的配置文件和终端输入 / 输出的即时回放。
主题美化：
字体颜色及字体大小、颜色、配色、透明度、底图、快捷键设置

image.png

image.png

image.png

image.png

8、oh-my-zsh

配置文件

oh-my-zsh是一款对zsh shell的一款扩展工具，它提供了主题配色方案、插件机制等功能，方便用户进行个性化的配置。oh-my-zsh的配置文件主要有两个：

  • 主题配置
open ~/.zshrc

//把主题改为robbyrussell
ZSH_THEME="robbyrussell"
  • 插件配置

依旧在~/.zshrc文件中：

//启用`git`插件
plugins=(git)


//为`ls`命令定义一个别名为`ll`
alias ll='ls -alF'

自定义函数：

//创建一个名为`my_functions.zsh`的文件，并在其中定义一个名为`my_function`的函数，然后在`~/.zshrc`中添加如下配置来使用它
source ~/.oh-my-zsh/custom/plugins/my_functions.zsh

//在`my_functions.zsh`文件中定义函数
my_function() {
  echo "This is my function"
}

image.png image.png

官方插件 github.com/ohmyzsh/ohm…

下面列举一些常用官方插件：

  • git插件

git 插件是oh my zsh默认开启的插件，利用alias提供了很多的命令映射，可以帮忙大大缩短命令的输入命令的长度

image.png

  • zsh-autosuggestions 插件 zsh-autosuggestions 是一款可以自动提示命令的插件，当你输入指令时，会自动推测你可能需要输入的指令，如何如何你的要求，可以直接按下右键-> 即可自动补全完整指令，实际测试下来，补全效率很高。
//在~/.zshrc配置文件中
plugins=(zsh-autosuggestions git)
  • z插件

z 是一款自动跳转的插件，对于你跳转后的目录，之后可以直接输入最终目录的名字，就可以正确跳转了。

//在~/.zshrc配置文件中
plugins=(z)
  • d插件

d是一款查看最近跳转目录的插件，输入d之后可以查看最近跳转的目录，最近跳转目录都会有对应的编号，比如0，1，2等，直接输入编号就可以跳转至最近跳转的目录。

//在~/.zshrc配置文件中
plugins=(d)
  • vi-mode 插件

安装好插件后，默认是输入模式，你可以正常输入，当需要跳转时，按下Esc轻松切换至命令模式，然后你就可以随意跳转了。

//在~/.zshrc配置文件中
plugins=(vi-mode)
  • zsh-syntax-highlighting 插件

这是一款帮你将输入的指令进行高亮的插件，当你输入不合法的指令，在输入过程中，就可以看到指令会是红色，当输入合法指令时，颜色就是其他正常的配色。

//在~/.zshrc配置文件中
plugins=(zsh-syntax-highlighting)

ps:每次更新~/.zshrc文件后，都要执行一次才可启用生效：

source ~/.zshrc
常用第三方插件
  • kubectl插件

这个插件为 Kubernetes 的 kubectl 命令提供了别名和自动补全功能，‌使得在终端中使用 Kubernetes 命令变得更加便捷。‌例如，‌使用 "k" 代替 "kubectl"，‌"kgp" 代表 "kubectl get pods" 等，‌从而提高了工作效率。‌

  • copypath, copyfile, copybuffer插件

这些插件分别提供了拷贝路径、‌拷贝文件内容和拷贝命令行内容的快捷功能，‌使得在终端中复制粘贴操作更加方便快捷。‌

  • sudo插件

这是一个快捷 sudo 命令行插件，‌允许用户快速为命令添加 sudo 权限，‌无需每次都手动输入 sudo。‌

  • zsh-history-substring-search插件

这个插件允许用户通过子字符串匹配来搜索命令历史记录，‌快速找到并执行之前使用过的命令。‌

  • zsh-you-should-use插件

用于命令行 alias 别名提醒的插件，‌可以帮助用户快速回忆起常用的命令别名，‌提高工作效率。‌

avatar
文章
阅读
粉丝