前端开发环境安装-大前端从菜鸟到大神进阶路线图系列

/ 北极狐 
本系列教程都是在Mac系统下完成,强烈建议程序猿都应该有一台自己的Mac,虽然贵但非常值

Node.js是JavaScript语言的服务器运行环境，也是目前所有大前端开发必备的工具。因为不同的公司或不同的项目对node的版本要求不一样,我们先要安装一个node的版本工具nvm,这样就可以自由切换不同版本啦

nvm的安装

安装nvm需要在命令行下运行

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/0.35.3/install.sh | bash

本节写作时的版本号是v0.35.3。该命令运行后，nvm会默认安装在用户主目录的.nvm子目录。

然后，激活nvm

$ source ~/.nvm/nvm.sh

验证是否激活成功

$ nvm --version
0.35.3

输出目前安装的nvm版本号就代表安装激活成功了

接下来我们就可以安装node了

$ nvm install node

默认安装的将是node的最新稳定版

输入命令

$ nvm ls

可以查看目前系统里安装的node版本列表,可以使用下面的命令切换node版本

$ nvm use version

version是你需要切换的node版本号

$ node -v
v14.2.0

nvm更多的用法可以查看帮助文档

$ nvm -h

就像java有maven,php有composer,在node里也有一个强大的包管理工具npm

官网:https://www.npmjs.com/

这是全球最大的node模块生态系统,里面所有的模块都是开源免费的

但由于它是在国外的,有时候会因为网络原因下载安装包时不稳定,这时我们就需要切换到国内的镜像网站上。

nrm就是一个强大的镜像管理工具

命令行输入如下命令

$ npm install -g nrm

nrm就安装好了

$ nrm ls

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

可以列出目前可用的镜像地址,*号代表当前使用的镜像

可以使用下面的命令切换镜像源

$ nrm use taobao

由于npm的性能不太好,一个新的包管理器出现了这就是yarn

npm install -g yarn

yarn和npm使用方式对比如下

命令 npm yarn
初始化 npm init yarn init
安装包 npm install -s xxx yarn add xxx
移除包 npm uninstall xxx yarn remove xxx
更新包 npm update xxx yarn upgrade
全局安装 npm install -g xxx yarn global add xxx
安装所有依赖 npm install yarn install
执行包 npm run yarn run

目前的前端开发IDE很多，我个人使用的是vscode，开源免费插件多

官方下载地址:https://code.visualstudio.com/

到此我们的基础开发环境就准备好了