在本文中，我將展示如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 開發環境。

下載必備的軟件包

1. 下載並安裝WebStorm7。WebStorm7目前的穩定版本是7.0.3。為什麽我們選擇WebStorm？因為它提供了許多功能，如JavaScript代碼的語法完成，調試，語法高亮，版本系統集成等，你可以去WebStorm的更多信息的官方網站。

2. 從Cocos2d-x的官方網站下載Cocos2D-JS 3.0alpha版本。點此處下載。當你下載了的Cocos2D-JS 3.0alpha版本。你應該把它解壓縮到一個合適的位置。在我們的例子中，我把它解壓在~/work/cocos2d-js-v3.0-alpha2

   . ~代表你的主目錄路徑，這在我們的例子中是 /Users/linshun。

註意：

你也可以通過GitHub上得到的Cocos2D-JS的前沿版本。這裏是的Cocos2D-JS GitHub的版本庫，最新的開發工作在develop分支。

1. 下載並安裝Chrome34和JetBrains-IDE-support擴展。

好吧，讓我們來看看如何配置WebStorm7開發和調試我們的Cocos2D-JS應用。

如何創建新工程

Cocos2d-JS 提供了一個控制臺工具，使CH5和JSB應用程序的開發更加簡單和方便得多。你可以使用它來創建一個新的項目，其發布到Android，iOS，Mac OS或web，它是非常容易使用。

安裝Console工具

第一步，在你使用該工具前需要先安裝。 請克隆 Cocos2d-JS倉庫並跟新所有子模塊。在Cocos2d-JS文件夾下打開控制臺工具(console)，然後在控制臺上運行./setup.py。在安裝期間你可能需要提供你的 NDK, Android SDK 和 ANT的路徑。 註意該工具是使用python開發的，所以你需要在你的機子上安裝python 2.7.5或以後的版本(但是不支持 python3)。

**註意： ** 請執行 source ~/.bash_profile，使環境設置立即生效。

創建新工程

// 創建一個包含 Cocos2d-x JSB 和 Cocos2d-html5 工程:
cocos new -l js

// 創建一個僅包含 Cocos2d-html5 的工程:
cocos new -l js --no-native

// 在指定的目錄創建一個指定名字的工程:
cocos new projectName -l js -d ./Projects
 

在這個教程中，我們使用 cocos new -l js 在當前目錄創建一個MyJSGame工程。

運行該工程

• 使用Websever 運行 Cocos2d-JS 工程

  cd ~/work/MyJSGame
  cocos run -p web
  
  

• 使用Cocos2d-x JSB 編譯並運行項目

  cd ~/work/MyJSGame
  cocos compile -p ios|android|mac
  cocos run -p ios|android|mac
  

• 有用的參數

  -p platform : 平臺可以是 ios|mac|android|web.
  -s source : 你的工程目錄, 如果不指定當前目錄會被使用.
  -q : 靜默模式, 移除日誌消息.
  -m mode : debug 或 release 模式, 默認是debug
  --source-map: 普通的 source-map 文件. (僅針對Web 平臺)
  

配置WebStorm 進行Cocos2d-JS開發

首先，你應該啟動WebStorm7。如果這是你第一次啟動WebStorm，它會要求你選擇你的個人偏好，比如選擇鍵盤映射。

這是我的WebStorm啟動截圖：

圖1

註意:

如果你是第一次啟動WebStorm，最近打開工程部分應該為空。

現在，讓我嘗試用WebStorm進行Cocos2d-JS開發。

1. 打開已經創建好的項目 MyJSGame

   正如我們可以從上面的圖片中看到，你應該選擇Create New Project from Exisiting Files(從已存在的文件創建新項目)

   然後，它會提示你以下選項：

   圖2

   

2. 選擇Source files are in a local directory, no Web server is yet configured(源文件在本地目錄，沒有配置web server) 並點擊Next(下一步)繼續

   圖3

3. 在這一步，你應該展開目錄樹來指定你的MyJSGame源代碼放的位置。當你指定了正確的目錄，註意Finish按鈕仍然是灰色的。

4. 現在，我們應該設置該目錄為項目的Project Root(根目錄)。單擊項目根目錄按鈕，Finish(完成)按鈕將激活。

   圖4

5. 恭喜你，你已經成功配置了webstorm 開發 Cocos2d-JS 項目。

體驗 Cocos2d-JS

當你已經添加了整個的Cocos2D-JS項目目錄到WebStorm7。WebStorm將解析所有的Cocos2D-JS源代碼。如果你打開??MyJSGame/src/myApp.js，你可以得到的準確的語法自動補全的能力。

圖5

如果你有一個第三方JavaScript庫在你的Cocos2d-JS遊戲應用程序，你也可以把它添加到WebStorm庫來解析並啟用實時語法自動補全。

下面是說明：

(可選) 添加第三方庫進行解析

1. 點擊Settings(設置)按鈕啟動你工程的設置對話框:

   圖6

2. 在點擊Settings(設置)菜單後，它將彈出如下的對話框:

   圖7：

   

3. 現在你可以點擊 Add... 按鈕，然後會提示你指定你的javascript庫的路徑。

   圖8

在WebStorm中調試Cocos2d-JS javascript

是時候學習調試Cocos2d-JS代碼了。

使用JB chrome 擴展連接WebStorm 到 Chrome

1. 右鍵點擊 ~/work/MyJSGame下的index.html文件，並選擇 Debug ‘index.html‘

   圖9

   

2. 現在，它會自動打開你的Chrome瀏覽器。如果你把你的鼠標chrome上面的JB插件， 它會告訴你，它已經連接上WebStrom7.0.3：

   圖10

註意：

這一步很簡單，一旦你已經安裝了插件 - “JetBrains IDE support”。當你單擊WebStorm調試菜單，它會自動連接到瀏覽器。它是相當的方便啊！你也可以點擊右側Chrome瀏覽器的側邊欄的JB圖標，它會立即把你帶到WebStorm的IDE界面。

在WebStorm中調試javascript代碼

返回到WebStorm界面，並雙擊 MyJSGame/src/myApp.js 在代碼區展示。

1. 設置斷點。用鼠標右鍵單擊myApp.js源代碼視窗左邊的側欄。

   圖11

   

2. 開始調試。 WebStorm會自動啟動你的chrome瀏覽器，並運行示例項目。然後通過點擊JB圖標回到你的WebStorm。程序將停止在我們剛才設置的斷點處。且編輯器將切換到Debug視圖：

   圖12

   

3. 現在你可以做調試之類的事情，單步跳出，單步進入入，單步跳過，繼續執行等。

總結

在本教程中，向你展示了基本的步驟來配置WebStorm7進行Cocos2d-HTML5的開發工作，包括配置語法感知自動補全和調試。過程是相當簡單明了。如果你對這個教程有任何疑問或建議，請告訴我們。我們將非常感謝你的貢獻。

何去何從

在接下來的教程中，我們將通過內置的Cocos2d-JS測試和示例遊戲，告訴你如何設置一個新的Cocos2d-JS項目。

轉載自：cocos2dx開發網由百牛信息技術bainiu.ltd整理發布於博客園

【cocos2d-js官方文檔】一、搭建 Cocos2d-JS 開發環境