筆記內(nèi)容：微信小游戲的環(huán)境搭建
筆記日期：2018-02-01

創(chuàng)新互聯(lián)建站擁有網(wǎng)站維護(hù)技術(shù)和項(xiàng)目管理團(tuán)隊(duì)，建立的售前、實(shí)施和售后服務(wù)體系，為客戶提供定制化的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、成都天府聯(lián)通服務(wù)器托管解決方案。為客戶網(wǎng)站安全和日常運(yùn)維提供整體管家式外包優(yōu)質(zhì)服務(wù)。我們的網(wǎng)站維護(hù)服務(wù)覆蓋集團(tuán)企業(yè)、上市公司、外企網(wǎng)站、商城系統(tǒng)網(wǎng)站開發(fā)、政府網(wǎng)站等各類型客戶群體，為全球1000多家企業(yè)提供全方位網(wǎng)站維護(hù)、服務(wù)器維護(hù)解決方案。

---

下載官方工具

首先需要去微信公眾平臺(tái)下載官方的開發(fā)工具，官網(wǎng)的下載地址：

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

下載開發(fā)工具：

下載完成后就安照提示，一步步安裝就可以了，安裝很簡單這里就不贅述了。

然后最好有一個(gè)編碼體驗(yàn)更友好的IDE，比如WebStorm、HBuild、Sublime等，我們這里用的是WebStorm。官方的開發(fā)工具很很很難用，所以我們一般只用于調(diào)試，不用于編碼。

下載好后，我們先來創(chuàng)建一個(gè)小游戲的模板項(xiàng)目：

我這里選擇的是無Appid：

然后選擇一個(gè)項(xiàng)目目錄進(jìn)行創(chuàng)建：

可以看到會(huì)創(chuàng)建一個(gè)小游戲的模板：

如果你不要這個(gè)模板，就在創(chuàng)建時(shí)項(xiàng)目時(shí)不勾選那個(gè)選項(xiàng)即可。

---

然后在WebStorm中打開這個(gè)小游戲工程：

如上，可以看到，WebStorm不認(rèn)識(shí)這些代碼，所以報(bào)語法錯(cuò)誤，這是因?yàn)閃ebStorm默認(rèn)的js代碼是ES5的標(biāo)準(zhǔn)，而這里的js代碼是ES6的，所以我們需要設(shè)置js代碼為ES6的標(biāo)準(zhǔn)，打開setting界面進(jìn)行設(shè)置：

保存設(shè)置后就不報(bào)錯(cuò)了：

但是這時(shí)候WebStorm會(huì)提示，是否讓文件監(jiān)視器使用babel將ES6格式的代碼轉(zhuǎn)換為ES5：

所以我們還需要安裝node和babel等前端工具鏈。

babel是js的編譯器，能幫我們把ES5的代碼編譯成ES6標(biāo)準(zhǔn)的js代碼，官網(wǎng)地址如下：

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

安裝這個(gè)源后，就可以使用cnpm 命令來代替npm 命令，例如使用cnpm 來安裝babel：

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

安裝完成之后回到WebStorm上，打開setting，把我們安裝的babel配置進(jìn)去：

會(huì)自動(dòng)幫我們找到babel.cmd文件的位置，所以我們點(diǎn)擊ok即可

如果配置完后，報(bào)以下錯(cuò)誤：

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

就在WebStorm的終端里執(zhí)行以下這句命令：

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

然后這時(shí)工程目錄就會(huì)多出一個(gè)dist目錄，而里面的js文件就是轉(zhuǎn)譯后的ES5標(biāo)準(zhǔn)的js代碼：

如果使用以上方式還是不行，依舊報(bào)錯(cuò)的話，則不使用全局的babel，而是在項(xiàng)目中安裝babel，同樣的也是打開WebStorm的終端，然后在里面執(zhí)行以下的安裝命令：

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

安裝完之后重新配置babel.cmd所在的路徑：

并在項(xiàng)目的根目錄下創(chuàng)建一個(gè).babelrc文件，我這里創(chuàng)建的是babel.babelrc，然后編輯內(nèi)容如下：

{
  "presets": [
    "env"
  ]
}

成功的情況下，也是會(huì)多出一個(gè)dist目錄。

網(wǎng)站欄目：微信小游戲的環(huán)境搭建
文章鏈接：http://aaarwkj.com/article6/peejig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、Google、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)