准备 Angular 开发环境拢共分两步：

  1. 装 NodeJS
  2. npm install -g @angular/cli

然后用 ng 命令照著文档开发就行了，对绝大部分项目来说默认配置就足以用到项目的生命周期结束了。

  1. 新手入门用 parcel，能解决新手的大部分需求
  2. 逐渐学习命令行、Node.js、webpack loader 和 plugin
  3. 使用 Vue 和 React 的脚手架，并尝试自定义 loader
  4. 期间遇到英语不要慌

做到这些就行了，我的前端体系班就是这样教的。

刚开始学前端应该不会遇到这个问题才对

那如果你一上来就要搞这些，我觉得你可能是还没学会走就想跑

一开始学习前端不建议自己配置开发环境，这样既耽误学习进度，又容易意降低学习积极性。建议使用官方的脚手架，react 就用 create-react-app，vue 就用 vue-cli，angular 就用 angular-cli。

我当初重学前端的时候也是觉得前端开发环境配置起来太复杂了，严重打击自信心。虽然说这一方面反应了前端生态的活跃，但是复杂的东西很容易劝退人。

我建议刚开始入门的时候你不要自己去从零开始配，就 copy 改就好了，最重要的是要弄明白它们是干嘛用的，等你哪天碰到配置上的问题就去官方文档上查，改改配置。不建议看百度出来的文章，很多都是过时的，看官方文档就好，webpack 的中文文档我觉得就翻译的挺好的。很多构建工具都有官方教程或者说指南，建议想系统学习的时候先走一遍官方的教程。webpack 官方教程就建议多看几遍，涉及到了打包和生产环境优化的方方面面，看十篇别人总结的文章还不如看一遍官方的 guide，既权威又是最新的。

找一个技术工具的官网，不要去百度搜，建议 Google 上搜。一般来说在它们的 github 仓库的简介中会有官网地址，据我观察，很多开源工具的官网都是用 io 或者 org 的根域名，如果你看的文档是 cn 和 com 的根域名那你就要注意了。

还有，善用 github issues 和 stackoverflow。

等你慢慢差不多熟了以后，可以尝试自己从零开始搭一个开发环境。

系列教程：

从零开始配置 react + typescript（一）：dotfiles?

juejin.im

从零开始配置 react + typescript（二）：linters 和 formatter?

juejin.im

从零开始配置 react + typescript（三）：webpack?

juejin.im

有了 nodejs 和 npm 之后，前端的这些脚手架 scaffold 设施确实越来越复杂。为什么会这样，可以参考这个回答 为什么要把前端搞的这么复杂，UI 组件不是很好用吗， 难道就是为了推广 nodejs 和 npm 吗?

我最开始遇到的情况和你一摸一样，被搞得焦头烂额。这里我说说自己的经验。

1 一次只配置一样

一次只配置一样，尤其是你有很多脚手架配置的时候。假设我有

  • React
  • Enzyme Jest
  • Webpack
  • TypeScript
  • ESLint
  • Prettier

采取叠加的方法，一次只配置一个，并且确保那一个可以正常运转。我会先配置 Webpack，然后 React，然后 TypeScript 等等。每次配置一次就全部运行一遍，看看有没有问题。如果有就立即检查，并且在没弄好之前，不要进行下一步。

2 善用 boilerplate

即使是一次只配置一个，也可能遇到非常复杂的配置。例如在首次配置 Webpack 的时候可能遇到各种问题。又例如从 Webpack 升级到 Webpack 2 的时候几乎是完全不兼容的，在升级的时候我几乎是经历了一场噩梦，就像从 AngularJS 到 Angular 2 一样的噩梦。

我尝试了很多办法之后最后实在没办法，于是直接从官网下载了 sample config 然后在那个基础上一步一步改成我自己需要的配置。最后发现用这种方式配置简直效率高出天际。

环境配置确实非常难搞，而且不是配置一次永久有效。这个基本上每隔一段时间都得重新来一遍。新的项目，新的版本，各种不兼容。除了经验，细心必不可少。

配置环境也是程序员要学习的一种能力。

之前零基础做站点搭linux伺服器，从CentOS 6到CentOS 7的配置都会有细节上的变动，从初始配置到运行中出现的各种小问题，修改配置，最后到基本稳定，后来OS升级版本，又继续循环找配置bug和差异。中英文搜索，CSDN，系统官网，国外知名伺服器提供商论坛等等，一起用寻找一些问题的解决办法。最终一步一步解决了。

后来零基础做前端环境配置，从零开始做加法，从gulp，到webpack，到webpack+react，再到更加复杂的脚手架配置，中英文搜索，CSDN，系统官网，国外知名伺服器提供商论坛等等，一起用寻找一些问题的解决办法。最终一步一步解决了。

循序渐进吧，况且只是针对项目做一些基础性的配置，又不是去专研大厂那种非常有深度的配置，有那么多巨人做FAQ呢，还怕什么呢。

是要经历这么个过程

说个办法，在学习的过程中，做加法

比如webpack，那就排除其他的干扰，只学webpack，那就只有webpack相关的错误。对照webpack相关的官网，官网有几个地方因为版本问题带来的异常，你需要搜索解决。

然后慢慢加，什么路由啊，状态管理啊，各种。慢慢自己搭个架子，加上去。中间会遇到各种问题你需要一个一个解决。

反之，你跳跃这步，直接用别人的环境，出任何一点问题，肯定一脸懵逼。

做完以上步骤，开始用别人成熟的环境。

同时需要对npm中各种包熟悉，特别是项目中的。

Node这一套中的包管理，烂透了

可能过了个几个月，东西就不兼容了。

看报的错，慢慢调。

比如前段时间有个半年没碰的项目，花了一整天才把antd升级到4，再加上ts的异常，中间报各种问题，我也没觉得多难，只是改造很无聊而已

webpack我开始学的时候还是2.x比较多。但是等我装的时候，发现已经webpack3了。教程很多还是2.x的。你能想像到这版本不一样，居然是各种问题的么。 一堆英文，一堆爆红。搞个vue配置搞半天。

后来，好像4出来了。当时有个老哥还侃了句：

卧槽，我才出3.x的教程。白忙活了。

工具环境这些，我觉得难的，麻烦的是。没有一个很好解决问题的文档，自己迭代后各种问题让人手足无措。

初学者，跳过工具，可以直接用脚手架吧。

这一块，我觉得angular就很不错。我用的时候，都没怎么需要考虑这些东西太多。ng-，

用久了，问题也就慢慢会解决了。 我是这么想的。

实在抱歉，推荐你还是学习一下docker...

本来如果是项目组，应该有人做好镜像或者dockerfile给你用的

配环境无论前端后端运维都是一样的，环境因素很多（网路，系统，软体版本兼容。。。）不过好在有Google有百度，还有日志各大论坛，基本上大部分问题只要不是代码配置问题，如果是环境问题99.999%都可以解决，配的时候遇到问题碰到得多了就自然知道问题所在。。。题外话——如果觉得环境配置问题都感觉头大，趁早做好心理准备

跟后端开发相比，前端需要配置的东西简直不值一提了。之所以焦头烂额，是因为压根没理解你配置的东西。回炉重造吧。理解之后一点通。

我搞伺服器的时候，没用宝塔，

centos安装

php安装

mysql安装

nginx安装

成功完成环境搭建一次至少需要几天。

都是自己摸索著来的，看文档。

而且感觉每次都出现不同的错误，而且google或者baidu出来的答案总是不太靠谱，

最后我就重装好几次环境，终于搞懂了。

把每次的出错点都记录下来。

伺服器的好处是他配置变化不会太大。

后来搞后端的配置也挺简单的，tomcat什么的，docker，文档之类写的也都很清楚。

前端么，感觉就是不停变吧。你之前用到的配置，很很可能就失效了。

webpack 2.0

webpack 3.0

webpack 4.0

这只是前端环境中的一个打包工具，

一旦升级，你的配置就挂了，又要去官网翻文档，

要不就不升级，要不就折腾，这就是现状，

而且前端变很快，各种工具的升级，像react去年react hooks大火,是不是又该学习下。

要是服务端这么搞，动不动就升级，一定被骂死。

毕竟服务端要求稳定。

前端就是各种花哨，各种玩法，才这么蓬勃发展~~~

你问我怎么办？学啊，学多了就习惯了。

安装Node.js及工程项目依赖，对新手确实有挑战。

如果你为了学习Vue.js，推荐下 HBuilderX，自动帮你安装Node及vue-cli，更为简单点。

webpack4开始以约定优先提供默认配置了，基本可以开箱即用。webpack作为目前前端最火的打包工具，是一定要掌握的。若目前的重点是学习其他方面的东西，那就使用脚手架先搭建一个能立即使用的项目。

我也跟某个答主一样推荐，angular。

只不过，步骤不一样

第一步，打开angular中文官网。

Angular?

angular.cn

第二步，按照文档一步一步来

首先要理解作为一个项目而言，存在一些架构配置是很正常的，这些配置配合webpack等帮助你启动开发环境，打包部署上线等等。

如果觉得很复杂，可以先略过，使用一些配置间的的脚手架工具，这些工具就是为了降低使用难度的，比如vue-cli create-react-app，都是按照教程简单几步就能启动项目的。

最后有时间也要了解脚手架工具的原理，一般就是webpack一类的，多看看这些工具的文档就慢慢懂了。

caotao：【译】向恐龙解释现代JavaScript?

zhuanlan.zhihu.com图标

可以先看看这个文章，了解一下为什么要配环境

先了解 再使用

复杂吗额

善用虚拟机的克隆和快照+做笔记！

把需要的东西都准备好，然后开始，先装系统，测试OK，镜像1份，克隆一份，写个版本号001，做笔记！

然后安装某包，某ide，某程序，测试OK，镜像一份，克隆一份，写个版本号002，做笔记！

任意一步失败，返回上一个镜像，如果上一个忘记做镜像，删除此虚拟机，启动克隆虚拟机！

推荐阅读：
相关文章