【第01课：搭建开发环境】

您所在的位置：网站首页 › vscode配置web开发环境 › 【第01课：搭建开发环境】

【第01课：搭建开发环境】

#【第01课：搭建开发环境】| 来源: 网络整理| 查看: 265

本课的主要内容：

Node.js Angular CLI 创建第一个项目一些常见的坑 VS Code webpack-bundle-analyzer Node.js

2009 年，Node.js 发布了第一个版本，标志着前端开发正式告别了刀耕火种的原始状态，开始进入工业化时代。

在 Node.js 出现之前，前端开发领域有很多事情我们是做不到的，比如：

JS 代码的合并、压缩、混淆 CSS 预处理前端自动化测试

而这一切在 Node.js 出现之后都得到了很好的解决。

对 JS 代码的预处理经历了 Grunt、Gulp 的短暂辉煌之后，终于在 Webpack 这里形成了事实标准的局面。 CSS 的预处理也从 Less 发展到了 Sass 等。自动化测试一直是前端开发中的一个巨大痛点，由于前端在运行时严重依赖浏览器环境，导致我们一直无法像测试后端代码那样可以去编写测试用例。Node.js 出现之后，终于有了像 Karma + Jasmine 这样的单元测试组合，也有了基于 WebDriverJS 这样的可以和浏览器进行通讯的集成测试神器。

就前端开发目前整体的状态来说，无论使用什么框架，Node.js、Webpack、Sass、Karma + Jasmine、WebDriverJS 这个组合是无论如何绕不过去的。

Angular CLI

在开发 Angular 应用的时候，当然也离不开大量基于 Node.js 的工具，我们需要 TypeScript Compiler、Webpack、Karma、Jasmine、Protracter 等模块。

有相关经验的开发者都知道，自己从头开始去搭建一套基于 Webpack 的开发环境是一件非常麻烦的事情，很多初学者在搭建环境这一步就消耗了过多的精力，导致学习热情受到了沉重的打击。

当团队规模比较大的时候，在每个人的机器上配置环境需要消耗大量的时间。有一些团队为了避开这个坑，利用 Docker 来做开发环境的同步和版本升级，看起来也是一个非常不错的方案。

Angular 项目组从一开始就注意到了这个问题，所以有了 Angular CLI 这个神器，它的底层基于 Webpack，集成了以上提到的所有 Node.js 组件，你只要安装好 Angular CLI 就够了，不需要自己从头一步一步安装那些 Node.js 插件。

当然，在安装 Angular CLI 之前需要先把 Node.js 安装好，请到官方网站（点击这里跳转到官方网站）下载安装包，安装过程和普通软件没有区别。安装好 Node.js 之后就可以安装 Angular CLI 了，由于 npm 会自动访问海外的服务器，因而强烈推荐使用 cnpm 进行安装：

npm i -g cnpm --registry=https://registry.npm.taobao.org cnpm i -g @angular/cli

cnpm 是淘宝发布的一款工具，会自动把 npm 上面的所有包定时同步到国内的服务器上来，cnpm 本身也是一款 Node.js 模块。

Angular CLI 安装成功之后终端里面将会多出一个名叫 ng 的命令，敲下 ng，将会显示完整的帮助文档：

enter image description here

创建第一个项目

我们来创建第一个入门项目 HelloAngular，请在终端里面运行如下命令：

ng new HelloAngular

@angular/cli 将会自动帮你把目录结构创建好，并且会自动生成一些模板化的文件，就像这样：

请特别注意：@angular/cli 在自动生成好项目骨架之后，会立即自动使用 npm 来安装所依赖的 Node 模块，因此这里我们要用组合键 Ctrl + C 终止掉它，然后自己进入项目的根目录，使用 cnpm 命令来进行安装。

enter image description here

安装完成之后，使用 ng serve 命令启动项目：

enter image description here

打开浏览器，访问默认的 4200 端口，若看到以下界面就说明环境 OK 了：

请注意以下几点：

这里是 serve，不是 server，我看到一些初学者经常坑在这个地方。如果需要修改端口号，可以用 ng serve --port **** 命令来进行指定。 ng serve --open 可以自动打开默认的浏览器。如果想让编译的包更小一些，可以使用 ng serve --prod，@angular/cli 会启用 TreeShaking 特性，加了参数之后编译的过程也会慢很多。因此，在正常的开发过程里面请不要加 --prod 参数。 ng serve 是在内存里面生成项目，如果你想看到项目编译之后的产物，请运行 ng build。构建最终产品版本可以加参数，ng build --prod。

ng 提供了很多非常好用的工具，除了可以利用 ng new 命令来自动创建项目骨架之外，它还可以帮助我们创建 Angular 里面所涉及到的很多模块，最常用的有以下几个。

自动创建组件（ng generate component MyComponent，ng g c MyComponent），创建组件的时候也可以带路径，如 ng generate component mydir / MyComponent。自动创建指令：ng g d MyDirective。自动创建服务：ng g s MyService。构建项目：ng build，如果想构建最终的产品版本，可以用 ng build --prod 命令。

更多的命令和参数请在终端里面输入 ng 命令仔细查看，尽快熟悉这些工具可以非常显著地提升编码效率。

一些常见的坑

@angular/cli 这种“全家桶”式的设计带来了很大的方便，同时也有一些读者不太喜欢，因为很多底层的东西被屏蔽掉了，开发者不能天马行空的自由发挥。比如，@angular/cli 把底层 Webpack 的配置文件屏蔽掉了，很多喜欢自己手动配 Webpack 的开发者就会感到很不爽。

对于国内的开发者来说，上面这些其实不是最重要的，国内开发者碰到的坑主要是由以下两点问题引起的：

网络问题，比如 node-sass 这个模块很有可能就装不上，原因你懂的；开发环境导致的问题，国内使用 Windows 平台的开发者比例依然巨大，而 @angular/cli 在 Windows 平台上有一些非常恶心的依赖，比如它需要依赖 Python 环境、Visual Studio 环境。

因此，如果你的开发平台是 Windows，请特别注意以下几点。

如果你知道如何给 npm 配置代理，也知道如何翻墙，请首选 npm 来安装 Angular CLI。否则，请使用 cnpm 来安装 Angular CLI，原因有三： cnpm 的缓存服务器在国内，装东西的速度会快很多；用 cnpm 可以帮你避开某些模块装不上的问题，因为它在服务器上面做了缓存； cnpm 还把一些包都预编译好了缓存在服务端，比如 node-sass，使用 cnpm 不需要在本地进行源码编译，因此你的机器上可以没有那一大堆麻烦的环境。如果安装失败，请手动把 node_modules 目录删掉重试一遍，全局的 @angular/cli 也需要删掉重装，cnpm uninstall -g @angular/cli。如果 node_modules 删不掉，报出路径过长等之类的错误，请尝试用一些文件粉碎机之类的工具强行删除，这是 npm 的锅，与 Angular 无关。最新版本的 Angular CLI 经常会有 bug，尤其是在 Windows 平台上面，请不要追新版本太紧，如果发现了莫名其妙的问题，请尝试降低一个主版本试试。这一点非常重要，很多初学者会非常困惑，代码什么都没改，就升级了一下环境，然后会有各种编译报错。如果你愿意，去官方（点击这里跳转到官网）提 issue 是个很不错的办法。对于 MAC 用户或者 *nix 用户，请特别注意权限问题，命令前面最好加上 sudo，保证有 root 权限。无论你用什么开发环境，安装的过程中请仔细看 log，很多读者没有看 log 的习惯，报错的时候直接懵掉，根本不知道发生了什么。 VS Code

如你所知，一直以来，前端开发领域并没有一款特别好用的开发和调试工具。

WebStorm 很强大，但是吃资源很严重。 Sublime Text 插件很多，可惜要收费，而国内的企业还没有养成花钱购买开发工具的习惯。 Chrome 的开发者工具很好用，但是要直接调试 TypeScript 很麻烦。

因此，Visual Studio Code（VS Code）才会呈现出爆炸性增长的趋势，它是微软开发的一款前端编辑器，完全开源免费。VS Code 底层是 Electron，界面本身是用 TypeScript 开发的。对于 Angular 开发者来说，当然要强烈推荐 VS Code。最值得一提的是，从 1.14 开始，可以直接在 VS Code 里面调试 TypeScript 代码。

环境配置确保 Chrome 安装在默认位置确保 VS Code 里面安装了 Debugger for Chrome 这个插件把 Angular CLI 安装到全局空间 npm install -g @angular/cli，国内用户请使用 cnpm 进行安装。注意，最好升级到最新版本的 Angular CLI，避免版本兼容问题。用 @angular/cli 创建新项目 ng new my-app ，本来就已经用 @angular/cli 创建的项目请忽略这一步，继续往下走，因为只要是 CLI 创建的项目，后面的步骤都是有效的。用 VS Code 打开项目，进入项目根目录。配置 launch.json

请参照以上步骤打开 launch.json 配置文件。

enter image description here

请把本地 launch.json 文件里面的内容改成这样：

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Chrome", "url": "http://localhost:4200", "webRoot": "${workspaceRoot}" } ] } 开始 Debug

在 app.component.ts 的构造函数里面打个断点，我本地是这样打断点的：

enter image description here