Eclipse搭建HTML5開發環境


前言

文本編輯器 or IDE

Html5的學習已經有一段時間了,隨着應用的復雜程度越來越高,普通的文本編輯器已經很難滿足我的開發需求了。到目前為止,我一直在使用Notepad++作為Javascript的編輯器,對於很多新手來說,Notepad++非常適合作為Html5的開發工具,尤其是如果你懂得如何使用其強大的插件。不過,盡管Notepad++很強大,畢竟不能提供很好的Html5支持;而且,隨着工程代碼量增加,簡單的文本編輯器難以維護整個工程的所有文件。 所以,我們需要的是一個更好的工具,一個適合於Html5工程項目的開發工具。

Why Eclipse

這樣的工具有很多,其中優秀的也不少,像Webstorm、Dreamweaver等等。Dreamweaver對Html5的支持很不錯,不過DW似乎更適合於做網頁而非應用;Webstorm是一個強大的IDE,對Html5的支持非常好,而且適合於應用開發,例如使用Webstorm開發cocos2d-html5游戲非常方便。 但是這些都是商用軟件,如果你願意,可以去購買,當然更多的人選擇破解版或者免費試用版。不管是哪些版本,能夠滿足需求就好。如果說有什么優秀的IDE是不要錢的,第一個想到的就是Eclipse。可是Eclipse不是做Java開發的嗎?事實上Eclipse平台提供了多種語言的開發工具,只是在Java開發方面最為出名而已。Eclipse支持基於J2EE的動態Web開發,當然也支持靜態Web開發。Html5應用可以看做是靜態Web程序,或者如果你的應用需要服務器支持,也可以做成動態Web程序。不管怎樣,使用Eclipse開發Html5應用完全沒有問題。

准備

下載

你需要做的就是下載一個Eclipse——點擊這里下載最新版的Eclipse 下載最新版的Eclipse一定沒錯。這里推薦使用Eclipse IDE for Java EE Developers,包含動態Web開發包,對於使用J2EE開發網站的開發人員非常不錯。 建議下載壓縮包版。

安裝和配置

如果你只需要開發Html5應用,那么不用配置Java環境。當然,如果你不是一個Java開發人員,我不推薦使用Eclipse作為你的Html5開發工具,畢竟Eclipse沒有提供專門的只為靜態Web開發的工具,在這種情況下使用Eclipse顯得有些大材小用。 如果你下載的是壓縮包,直接解壓即可。 Eclipse幾乎不需要怎么配置,你只需在首次啟動的時候選擇你的工作空間就行。所謂工作空間就是你的所有工程創建時默認所在的目錄。

創建工程

打開你的Eclipse,菜單選擇File->New->Project...或者File->New->Other... 你現在會看到類似下面的一個彈出窗口,這個窗口就是告訴你所有可選的項目類型。
選擇Web->Static Web Project 點擊Next
填寫你的項目名稱,如Html5Demo 點擊Next
填寫你的content folder名稱,如myHtml5 這個content folder就是你的應用所在的根目錄 點擊Finish

添加文件

右鍵你的content folder的名字,選擇New->HTML File 填寫File name為index或者index.html index.html是主頁面,主頁面不建議使用其它名字,index.html不同於其它的頁面。 點擊Next
這里出現的是Html文件版本的選擇,不同的版本使用不同的模板,當然我們也可以修改和創建自己的模板,后面會向大家介紹。 選擇New HTML File (5) 點擊Finish
打開index.html,你會看到類似下面的代碼,這些都是模板自動生成的,如果你的代碼和我的不一樣一點也不奇怪,因為我的模板經過修改。
到目前為止我們已經基本完成了開發環境的搭建。用前面類似的方法,我們可以在content folder下面創建其它html文件、css文件、js文件或者文件夾,從而豐富我們的應用。 你也可以把庫或引擎加到你的工程里面,比如像我的box2d游戲項目的目錄如下:

配置

模板

很多新手不明白Html5開發為什么要使用開發工具?這就像許多剛剛入門的網頁開發人員一樣。之所以要使用開發工具,無非是貪圖方便和便於維護。那些我們在入門的時候寫過幾十遍甚至幾百遍的代碼,你真的還願意自己一個一個的敲嗎?模板是一個很好的工具,可以幫助開發人員提高開發效率,讓開發人員只專注於最重要的部分。 如何配置你的Html模板?方法很簡單。 選擇Window->Preferences 你會看到類似下面的彈出對話框。
選擇Web->HTML Files->Editor->Template 看到HTML5了嗎?那就是我們剛剛新建的時候選擇的模板。Name表示模板名稱,Context表示模板的使用環境,Description為描述信息。 我們可以點擊右邊的Edit按鈕修改已有的模板,但是我不建議這樣做。更有個性的做法是,我們可以點擊New按鈕,新建一個我們自定義的模板。 點擊New...
填寫你的模板的名稱、描述,選擇使用環境為New HTML 現在,根據你的個人習慣或需求,粘貼或寫入你的模板代碼 點擊OK 看到了嗎?模板列表里面出現了你剛剛定義的模板。 你可以將模板導出或導入,Eclipse將生成一個模板XML文件。這樣方便你在別的Eclipse里面使用。 點擊Export 在彈出對話框中填入文件名,確定。 把剛剛新建的模板選中 點擊Remove 此時模板被移除 點擊Import 在彈出對話框中選擇剛剛導出的模板XML文件,確定。 模板又回來了! 想查看你的模板的效果,新建一個Html文件試試吧!

字符編碼

想修改文件的編碼?也許你會想到直接修改charset,這是一個辦法,卻不是好辦法,因為你修改的只是瀏覽器知道的文件編碼方式而不是真正的文件編碼方式。注意一定要讓文件的編碼方式和charset指定的一致,不然會出現亂碼。當你修改了charset之后,如果用文本編輯器,你可以到類似“格式”的菜單中修改文件的編碼方式。 使用Eclipse,你可以在File->Properties找到。
修改Text fileencoding與你的charset一致 點擊OK 這樣太麻煩了!因為我們的項目文件通常使用統一的編碼,所以我們可以指定一種默認的文件編碼方式,這可以減少很多麻煩,正如前面所說,IDE可以幫我們減少這種無謂的麻煩。 Window->Preference->Web->HTML files
這里你可以找到Encoding,設置為你的項目文件的統一編碼。 然后在模板里面charset的值修改為${encoding},這樣新建文件的時候會根據上面Encoding的值自動寫入編碼方式。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com