前端工程化开发，本地启动开发环境都是基于nodejs的，命令行里输入指令node -v可以帮助确认您的电脑上是否安装了node，如果没有安装，则可以去 node官网 下载安装包，如下图所示： 不管是在windows还是在mac环境下，都是一键傻瓜式安装，甚至连环境变量都不需要手动配置，这里就不过多介绍了。
前端的开发工具，常见的有VSCode、WebStorm、Atom等，只需用其中之一便足可以完成您的开发任务。这里笔者给出常用编辑器的对比。
| 工具名称 | 优点 | 缺点 | 推荐度 |
|---|---|---|---|
| WebStorm | 插件很多，功能齐全 | 收费，占用资源大 | ☆★★ |
| Atom | 界面整洁，免费 | 插件安装多了会慢，不够流畅 | ☆★★ |
| VSCode | 轻量级，插件繁多，支持定制，免费 | 插件过多会出现冲突，代码的提示不友好 | ☆★★★★ |
笔者接下来的开发就以VSCode为准。
vsCode作为目前最为流行的轻量级开发工具，广受前后端程序员的喜爱，其插件库也是十分的丰富，可以供开发的进行自定义配置，而且提供了插件开发的功能，使得开源作者能够更加轻松的自定义自己的插件，并且有支持远程开发等优点。相比于webStorm和sublime这种需要购买正式版（sublime虽然不买也没什么关系）的产品，其最直接的优点是他是免费的！ vsCode官网地址为：https://code.visualstudio.com/，开发者可以下载自己所需的版本：
国内用户未翻墙的可能会出现下载缓慢的问题，这里作者提前下载好了国内版本放在文章末尾供大家下载。
atom也是免费的开发工具，这个根据自己的喜好来使用。作者一开始写网页也是用的atom，但是当你下载了官网的安装包，看到他的大小后，或者在使用很长一段时间后打开资源管理器后，你可能就会像作者一样弃用它！这里还是给出其官网地址https://atom.io/，他的界面作者还是挺喜欢的。
react工程化项目创建的脚手架工具这里作者介绍主流的两种：create-react-app和vite.
这里使用npx安装：npx create-react-app <工程名>。 注意工程名称使用字母数字连接线的形式(范例参考：create-react-app.dev/docs/gettin…)，这里作者使用hello-world1. 构建成功后会看到控制台打印如下指令：
进入工程根目录cd ./hello-world1
若创建时没有安装依赖成功，进入工程根目录下手动安装
npm inatall即可
执行指令：npm start，启动成功后在浏览器输入网址localhost:3000即可看到欢迎界面：
终端输入指令
# 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，可以继续往下看。
上边章节中，作者主要使用npm install的方式安装依赖，但是有时候，尤其是网络不太好的情况下，依赖总是不能被正确安装，出现安装错误。这个时候可能就需要进行下一步操作。
国内npm镜像可以绕开被墙的困扰，作者推荐taobao的镜像。你可以这样执行命令： npm install -g cnpm --registry=https://registry.npm.taobao.org，这样就全局安装了使用的taobao国内镜像的cnpm指令。你在项目根目录下试试cnpm install就会快很多。
你还可以这样配置镜像： npm config set registry https://registry.npm.taobao.org，这样你即使使用npm指令安装，也会走国内镜像安装。
前端工程化项目依赖安装不只有npm方式，还有他的各种变种。比如安装速度快，版本能够更好统一的yarn或者运行速度更快的pnpm。细心的读者可以发现，上面create-react-app安装的方式使用了npx，而没有使用npm -g这种全局指令方式。在npm 5.2以后的版本默认会安装npx命令，它可以避免全局安装模块。这些不同的策略在之后的文章中会提及，在这里不做过多的赘述。
nvm是目前比较主流的node版本管理工具，类似的还有nodist（https://github.com/nullivex/nodist/releases）。这里以nvm为准进行介绍。
进入官网下载链接https://github.com/coreybutler/nvm-windows/releases，下载assets中的安装包（文章末尾提供安装包）。
这里可以直接下载setup版的，解压后双击就可安装。当然也可以选择noinstall版本的，通过手动配置环境来达到相同的目的。这里以安装版为例。下图为安装界面：
一路next到底完成安装即可。环境变量已经自动配置好了。 在命令行中检查是否安装成功：
看到版本说明已经正确安装！！
进入官网下载链接https://github.com/nvm-sh/nvm#installing-and-updating，可以看到安装指引，我们遵从官方给的指令直接执行即可：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 复制代码
接下来您可能不会看到安装成功，反而会提示如下：
Failed to connect to raw.githubusercontent.com port 443
这是因为某种神秘的东方力量导致的github访问的问题，我们可以借助网址https://ipaddress.com/website/raw.githubusercontent.com查一下githubusercontent.com的真实IP，输入githubusercontent.com查询会看到：
我们找下边查到的IP其中一个即可（如果不行就换着试试），执行下述步骤：
进入mac的host文件：sudo vim /etc/hosts
最下边追加IP映射
经过这两步后再次尝试一哈，就可以执行成功了。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 复制代码
如果很不幸你叒叕出现了如下错误，不要惊慌，应该是没有检测到你的github账户，你只需要打开github主页登录账号重试即可。
unable to access 'github.com/nvm-sh/nvm.…': LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com: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指令：
成功！
我们可以使用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 <版本号>即可一键切换！
至此，前端工程化项目的环境配置已经结束！
附件清单：vscode安装包、nvm安装包（win）、atom安装包（mac）。
下载链接：
链接: pan.baidu.com/s/1zD2s9UjX… 提取码: 5diu
作者：小肚肚肚肚肚哦
链接：https://juejin.cn/post/7069976788822130718
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/127969.html
摘要：开发既是一个练习如何在开发环境中写代码的过程，反过来，也是一个验证环境搭建的对不对好不好用的过程。前端调用后端接口示例为突出重点，排除干扰，方便理解。 写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务，从而提供一些后端接口，供前端调用。搭建这个环境的目的是： 前端工程师在跟后台工程师商定了接口但还未联调之前，涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径...
摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...
摘要：原文发表于如何搭建开发环境这个项目结构是我在编写基于和的七牛文件上传总结出来的本文主要介绍如何从零开始搭建高效的开发环境主要内容如下通过合理的目录划分来组织代码使用简化开发如何在渲染进程开发时使用热更新如何在主进程开发时使用自动重启如何在主 原文发表于 https://lleohao.github.io/2017/09/02/如何搭建Electron开发环境/ 这个项目结构是我在编写...
摘要：课程内容以打造一款拥有天气预报和签到功能的小程序为主线，从基础知识到小程序运行机制，从开发环境搭建到小程序云开发的接口使用调试上线，打通微信小程序开发全流程。 9 月 11 日，微信开发者工具新增小程序「云开发」功能。 showImg(https://segmentfault.com/img/bVbjQLW?w=1000&h=544); 大多数开发者在开发应用时和部署服务时，无论是选择...
阅读 283·2024-11-07 18:25
阅读 130359·2024-02-01 10:43
阅读 864·2024-01-31 14:58
阅读 827·2024-01-31 14:54
阅读 82765·2024-01-29 17:11
阅读 3046·2024-01-25 14:55
阅读 1984·2023-06-02 13:36
阅读 3031·2023-05-23 10:26
