前端开发环境如何搭建
1、node环境与开发工具准备
前端工程化开发,本地启动开发环境都是基于nodejs的,命令行里输入指令node -v
可以帮助确认您的电脑上是否安装了node,如果没有安装,则可以去 node官网 下载安装包,如下图所示:
进入工程根目录cd ./hello-world1
若创建时没有安装依赖成功,进入工程根目录下手动安装npm inatall
即可
执行指令:npm start
,启动成功后在浏览器输入网址localhost:3000
即可看到欢迎界面:
3.2、vite构建
终端输入指令
# npm 6.x npm init vite@latest <工程名 --template <模板名 # npm 7+ npm init vite@latest <工程名 -- --template <模板名 复制代码
这里我们当然使用react
作为模板名、hello-world2作为工程名来构建工程目录。输入指令后你会发现项目构建的很快,那是因为脚手架没有默认帮你安装依赖,所以要进入工程目录(cd ./hello-world2
)并手动安装依赖:npm install
。依赖安装完成后,即可启动项目:npm run dev
,同样的,在浏览器输入网址localhost:3000
即可看到欢迎界面:
至此项目就启动完毕了~~
如果您只是想快速开发一个项目,环境配置到这里就结束了。以下内容为选择性观看内容,如果您觉得依赖安装比较慢,又或者需要管理不同版本的node,可以继续往下看。
4、依赖安装的方式(选读)
上边章节中,作者主要使用npm install
的方式安装依赖,但是有时候,尤其是网络不太好的情况下,依赖总是不能被正确安装,出现安装错误。这个时候可能就需要进行下一步操作。
4.1、npm国内镜像配置
国内npm镜像可以绕开被墙的困扰,作者推荐taobao的镜像。你可以这样执行命令: npm install -g cnpm --registry=https://registry.npm.taobao
,这样就全局安装了使用的taobao国内镜像的cnpm指令。你在项目根目录下试试cnpm install
就会快很多。
你还可以这样配置镜像: npm config set registry https://registry.npm.taobao
,这样你即使使用npm指令安装,也会走国内镜像安装。
4.2、不同的依赖安装策略
前端工程化项目依赖安装不只有npm方式,还有他的各种变种。比如安装速度快,版本能够更好统一的yarn
或者运行速度更快的pnpm
。细心的读者可以发现,上面create-react-app
安装的方式使用了npx
,而没有使用npm -g
这种全局指令方式。在npm 5.2
以后的版本默认会安装npx
命令,它可以避免全局安装模块。这些不同的策略在之后的文章中会提及,在这里不做过多的赘述。
4.3、使用nvm管理node版本
nvm是目前比较主流的node版本管理工具,类似的还有nodist(https://github /nullivex/nodist/releases
)。这里以nvm为准进行介绍。
4.3.1、windows环境安装
进入官网下载链接https://github /coreybutler/nvm-windows/releases
,下载assets中的安装包(文章末尾提供安装包)。
这里可以直接下载setup版的,解压后双击就可安装。当然也可以选择noinstall版本的,通过手动配置环境来达到相同的目的。这里以安装版为例。下图为安装界面:
看到版本说明已经正确安装!!
4.3.2、MacOS环境安装(需翻墙)
进入官网下载链接https://github /nvm-sh/nvm#installing-and-updating
,可以看到安装指引,我们遵从官方给的指令直接执行即可:
curl -o- https://raw.githubusercontent /nvm-sh/nvm/v0.39.1/install.sh | bash 复制代码
接下来您可能不会看到安装成功,反而会提示如下:
Failed to connect to raw.githubusercontent port 443
这是因为某种神秘的东方力量导致的github访问的问题,我们可以借助网址https://ipaddress /website/raw.githubusercontent
查一下githubusercontent
的真实IP,输入githubusercontent 查询会看到:
经过这两步后再次尝试一哈,就可以执行成功了。
curl -o- https://raw.githubusercontent /nvm-sh/nvm/v0.39.1/install.sh | bash 复制代码
如果很不幸你叒叕出现了如下错误,不要惊慌,应该是没有检测到你的github账户,你只需要打开github主页登录账号重试即可。
unable to access 39;github /nvm-sh/nvm.… 39;: LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github :443
最后!
安装成功的界面如下:
此时先不要着急,全局的nvm
指令还没有加入环境变量中,需要你来手动添加。执行命令(以zsh终端为例) sudo vim ~/.zshrc
,进入编辑后,追加:
export NVM_DIR= $([ -z ${XDG_CONFIG_HOME-} ] printf %s ${HOME}/.nvm || printf %s ${XDG_CONFIG_HOME}/nvm ) [ -s $NVM_DIR/nvm.sh ] \. $NVM_DIR/nvm.sh # This loads nvm 复制代码
然后生效配置文件:source ~/.zshrc
即可。
现在就试试nvm指令:
成功!
4.3.3、nvm基础使用
我们可以使用nvm list
命令查看当前node的版本列表
可以看到,当前只有系统默认的16.13.2版本。如果想要安装别的node版本,没有必要再去node官网下载了,可以直接使用nvm指令下载。我们可以先使用nvm ls-remote
看一下官方都有哪些正式版本:
列出的版本都是可以安装的,我们这里可以安装稳定版:nvm install stable
可以看到截止作者写这篇文章时,node的稳定版本是17.4.0,nvm会自动切换进安装的版本上。如果想要自定义版本号安装,可以使用指令nvm install <版本号
这里我们安装了12.22.10版本,再次nvm list
可以看到已经有三个版本了。想要在多个版本之间切换,只需使用指令nvm use <版本号
即可一键切换!
至此,前端工程化项目的环境配置已经结束!
5、附件
附件清单:vscode安装包、nvm安装包(win)、atom安装包(mac)。
下载链接:
链接: pan.baidu /s/1zD2s9UjX… 提取码: 5diu
作者:小肚肚肚肚肚哦
链接:https://juejin /post/7069976788822130718
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。