前端开发工具环境搭建

Posted 2021-04-08 弗斯基

这节我们来介绍一下前端开发和调试工具，以及前端开发本地开发环境的搭建。

 

我们先来说下前端开发，需要用到的开发工具。因为前端开发的特殊性，介于设计师与后端工程师之间，所以我们需要掌握包括与视图相关的一些工具以及与代码相关的工具。

 

与视图相关的

一般在网站开发流程中，设计师会先把产品界面设计好，并将一些规格要求参数提供给我们，我们再按照这份设计规格参数，将设计图形开发成对应的前端代码。在转化过程中，我们需要实时了解页面对应模块的规格参数，这个时候我们就需要用到与视图相关的工具，帮助我们读取设计图的规格参数。

常用的视图工具有Photoshop、Sketch等。他们能帮助我们获取网页元素的尺寸、颜色、字体等参数。许多开发团队会使用一些更专业的视图规格工具，例如Zeplin，通过Sketch设计的网页，导出到Zeplin，我们在开发页面的时候，只需在Zeplin中要将鼠标点击到某个模块，就可以看到对应的规格参数。

 

与代码相关的工具

我们前端开发需要处理视图代码、跨屏兼容外还需要与后端工程师协作，调用API完成部分业务逻辑，这就需要我们掌握一款代码编辑工具了。这里举例2个常用的前端代码开发工具。VS Code和Webstorm。

 

VS Code, 这是微软开发的一款免费的、开源的编辑器，它很轻巧，而且还支持安装插件拓展。可以运行在Mac/Windows/ Linux系统。编辑器的默认整体风格是黑色的，右边这张截图就是VS code了。

 

Webstorm, 是一款付费软件，因为它的html和javascript编辑功能非常强大，所以它被称为" WEB前端开发神器"。大家可以根据自己的实际情况，选择一款合适的代码开发工具。

 

那么说完了开发工具之后，我们一起来看一下，怎么搭建前端开发的本地开发环境。这里我们分为两种情况说明。一种情况是，当你需要开发一个简单的静态页面的时候，这时候你只需要安装一款代码编辑器就可以了，把编辑好的页面代码保存为html后缀文件，双击打开文件就可以预览了。另一种情况是，当你的项目比较复杂，需要进行模块化开发的时候，这时候你需要一套完整的、集成了样式文件预处理、打包构建等一系列前端开发工具的本地开发环境。

 

在模块化开发环境中，除了需要安装代码编辑器外，我们还需要安装：Node.js以及Npm第三方包管理工具。Node.js是基于Chrome V8引擎的JavaScript运行环境，在前端开发中，我们常常使用基于Node.js的第三方工具包，例如我们可以用webpack来构建打包我们的前端代码，用Eslint做我们的前端代码扫描工具。当然，这些所有第三方的包都可以通过npm来进行管理。

 

VS code的安装。我们可以从VS的官网下载到最新版本的VS code，下载后安装提示进行安装就可以了。

 

安装Node.js。同样，我们可以在Nodejs的官方网站上找到最新版本的Node.js，下载下来，根据提示进行安装即可。由于现有的Node.js集成了npm包管理，所以安装完Node.js，npm就会自动被加入到系统中。Node.js安装完成后，打开cmd窗口，输入node –v，如果Node.js有按照常规的话，我们可以看到它的版本信息。前端开发环境搭建就先介绍到这边。

 

在前端开发过程中经常会遇到一些视图或者逻辑代码的bug，这时候如果是单纯靠肉眼检查代码是很难发现问题的，需要用到调试工具。通常，在页面运行在浏览器时，我们可以按F12，打开浏览器的开发者工具，这样就可以快速定位到问题。

 

Chrome的开发者工具提供了一些元素检查、样式检查、JavaScript debug之类的功能，此外这个开发者工具还提供了一整套支持响应式开发的移动端模拟器，通过切换模拟器设备的型号，可以帮助我们检查页面在对应尺寸设备下的大体样式了。并且，开发者工具支持用户通过修改工具中的样式，实时将修改结果反馈就到模拟器中，这极大的帮助了我们debug。但是这种模拟器的模拟结果与真机会有一些差异，在产品测试中，我们还需要使用真机对我们页面进行测试。

 

此外，针对跨端苹果设备，苹果设备支持通过数据线连接到Mac电脑，从而通过Safari的开发者工具对页面进行debug，这种方式能帮助我们快速发现页面在真机上的问题。好了，这节前端开发工具和环境搭建就先分享到这里。