微信小遊戲的環境搭建

筆記內容：微信小遊戲的環境搭建
筆記日期：2018-02-01

---

下載官方工具

首先須要去微信公衆平臺下載官方的開發工具，官網的下載地址：

https://mp.weixin.qq.com/debug/wxagame/dev/devtools/devtools.html

下載開發工具：

下載完成後就安照提示，一步步安裝就能夠了，安裝很簡單這裏就不贅述了。

而後最好有一個編碼體驗更友好的IDE，好比WebStorm、HBuild、Sublime等，咱們這裏用的是WebStorm。官方的開發工具很很很難用，因此咱們通常只用於調試，不用於編碼。

下載好後，咱們先來建立一個小遊戲的模板項目：

我這裏選擇的是無Appid：

而後選擇一個項目目錄進行建立：

能夠看到會建立一個小遊戲的模板：

若是你不要這個模板，就在建立時項目時不勾選那個選項便可。

---

而後在WebStorm中打開這個小遊戲工程：

如上，能夠看到，WebStorm不認識這些代碼，因此報語法錯誤，這是由於WebStorm默認的js代碼是ES5的標準，而這裏的js代碼是ES6的，因此咱們須要設置js代碼爲ES6的標準，打開setting界面進行設置：

保存設置後就不報錯了：

可是這時候WebStorm會提示，是否讓文件監視器使用babel將ES6格式的代碼轉換爲ES5：

因此咱們還須要安裝node和babel等前端工具鏈。

babel是js的編譯器，能幫咱們把ES5的代碼編譯成ES6標準的js代碼，官網地址以下：

https://babeljs.io/

安裝babel前咱們須要先安裝node，而後經過npm來安裝babel：

https://nodejs.org/zh-cn/

我這裏下載的node是8.9.4 LTS版本的。

安裝完node後，在cmd中使用npm安裝babel，可是因爲npm使用的源是國外的，下載起來比較慢，因此咱們須要更換成淘寶的源：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝這個源後，就可使用cnpm 命令來代替npm 命令，例如使用cnpm 來安裝babel：

cnpm install -g --save-dev babel-cli babel-preset-env

安裝完成以後回到WebStorm上，打開setting，把咱們安裝的babel配置進去：

會自動幫咱們找到babel.cmd文件的位置，因此咱們點擊ok便可

若是配置完後，報如下錯誤：

Error: Couldn't find preset "env" relative to directory "."

就在WebStorm的終端裏執行如下這句命令：

cnpm i babel-preset-env --save-dev

而後這時工程目錄就會多出一個dist目錄，而裏面的js文件就是轉譯後的ES5標準的js代碼：

若是使用以上方式仍是不行，依舊報錯的話，則不使用全局的babel，而是在項目中安裝babel，一樣的也是打開WebStorm的終端，而後在裏面執行如下的安裝命令：

cnpm install --save-dev babel-cli babel-preset-env

安裝完以後從新配置babel.cmd所在的路徑：

並在項目的根目錄下建立一個.babelrc文件，我這裏建立的是babel.babelrc，而後編輯內容以下：

{
  "presets": [
    "env"
  ]
}

成功的狀況下，也是會多出一個dist目錄。