前端开发环境搭建

时间:2022-04-11 03:20:52

前端(FE)开发环境设置和编辑器选择

目的

本文旨在帮助刚刚加入前端开发的新人设置开发环境,掌握基本的编辑器的使用。使新人能够迅速融入团队,并开始具体代码的开发实践。

环境设置

安装Node JS和npm包管理系统

Node JS是用来搭建我们的本地开发环境的工具。它实现了一个简单的HTTP Server。在我们前台的开发中,我们通常使用根据NodeJS搭建的本地Apache Servlet服务器模拟前端代码和后台的通讯。 从而在开发中过程中不依赖于后台的调试。

Windows:

从 http://nodejs.org/ 下载msi安装包。双击安装。

安装成功后,你就可以在windows的命令行工具(cmd.exe)里使用了npm命令了。

NodeJS 包含在npm安装包中。

Linux:

运行命令

$ sudo apt-get install npm

安装npm和node包。

(*) npm里包含的node安装包太旧(0.6.8), 不支持我们后续的安装,需要手工升级一下到0.8以上的版本。需要执行以下命令更新node

sudo npm cache clean -f 
sudo npm install -g n
sudo n stable
使用
$ n -V
查看n的版本(注意是大V)

新安装的ubuntu没有curl,上面可能会报错,可输入

$ sudo apt-get install curl
先行安装curl 再执行上面的操作

需要确保node版本号高于0.8. 在 http://davidwalsh.name/upgrade-nodejs 中有详细升级攻略。

EDP开发环境的安装和设置

EDP是一个由百度开发的企业级前端应用的开发平台,提供了常用的项目管理工具、包管理工具、调试工具、构建工具、代码生成工具、代码检测工具等一系列开发时的支持,并允许用户自定义自己的扩展。

在我们的前端开发中,会需要使用EDP构建项目,搭建本地服务器等功能。

在 https://github.com/ecomfe/edp 可以找到由github托管的EDP代码和项目介绍。

Windows:

运行命令

npm install –g edp

自动安装edp包。 如果安装成功,可以在命令行里敲edp看是否已经成功安装edp程序。

Linux:

运行命令

$ sudo npm install –g edp

:安装时需要从外网下载很多安装包。有可能http连接会超时。目前没有很好的解决办法。可以反复尝试。知道一次全部成功为止。

:如果出现非http连接的错误,可能是其他问题。特别是在linux下可能会应为个别包裹太久,无法完成安装。这个时候需要具体问题具体分析。

启动本地服务器

可以通过EDP启动一个本地的服务器。把当前目录作为一个目录服务的根地址。

edp webserver start

服务器启动后会有如下输出,并自动监听8848端口。

^o^ Your edp is newest.

在浏览器输入localhost:8848, 打开一个页面,可以看见edp运行目录下的所有文件夹和文件。

Jasmine测试环境设置

我们使用Jasmine做前端代码的测试。目前只有在fc-ue/library下设置了测试的环境。

jasmine测试可以通过页面运行,也可以通过jasmine-node命令后运行。分别设置如下

页面运行jasmine测试通过edp实现:

进入fc-ue目录,运行

edp ws start

建立一个edp的本地apache服务器,然后再浏览器里查看测试页面 http://localhost:8848/library/src/test/run.html

端口可能会因为启动edp的时候通过--port指定了其他端口而变化。

在是src/下,每一级目录都包含一个test/run.html文件。用于运行这一级目录以及下级的所有目录的所有测试。

jasmine-node命令行运行测试:

全局安装jasmine-node工具

sudo npm install -g jasmine-node

全局安装jquery和jsdom工具,用于支持测试中的jquery和部分dom依赖

sudo npm install -g jquery
sudo npm install -g jsdom

注意:在windows下,运行这个命令可能会报错。需要先安装Microsoft Visual Studio C++ 2010 express version( link)

安装完成后,由于nodejs默认不会自动寻找全局安装的包,需要设置环境变量以寻找全局安装的工具

linux下:在.bashrc里设置

# NodeJs global env
export NODE_PATH=/usr/local/lib/node_modules/

并重新加载.bashrc文件

source ~/.bashrc

Windows下:右键点击“计算机”->属性->高级系统设置->环境变量 添加新的环境变量NODE_PATH,值为你的全局node_modules位置,一般来说在

C:\Users\<YOUR LOGIN NAME>\AppData\Roaming\npm\node_modules

需要重启一下windows 命令后程序,以确保加载新的环境变量。

运行测试

在fc-ue/library目录下,运行命令

jasmine-node --test-dir src

能看到如下提示

chenlijie@lijie:~/tasks/trunk/fcue1/fc-ue/library$ jasmine-node --test-dir src ................................ Finished in 0.023 seconds 32 tests, 42 assertions, 0 failures, 0 skipped

标志测试运行正常,所有测试都通过了。

编辑器选择

原则上前代不限制编辑器的使用。由于个人习惯不同,目前大家也有使用各种编辑器。

目前前端开发到人员在使用到编辑器有,可联系使用人员获得帮助。