前端(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标志测试运行正常,所有测试都通过了。
编辑器选择
原则上前代不限制编辑器的使用。由于个人习惯不同,目前大家也有使用各种编辑器。
目前前端开发到人员在使用到编辑器有,可联系使用人员获得帮助。