摘要：好，你用就用吧，各種問(wèn)題自己也不會(huì)看文檔問(wèn)谷歌，成天怨聲載道的不得不吐槽一下現(xiàn)在的年輕人。為什么使用有關(guān)和的糾結(jié)歷史可以去谷歌一下，此處不再啰嗦最根本的原因就是對(duì)的支持更好，更新和維護(hù)也更勤快。

Tips on Ember 2 對(duì)我來(lái)說(shuō)是沒(méi)什么計(jì)劃性的寫(xiě)作，我只是把它當(dāng)做是每天工作的總結(jié)日志，一個(gè)很重要的目的是為團(tuán)隊(duì)做一些技術(shù)事務(wù)的整理，以幫助一些新人快速成長(zhǎng)起來(lái)。如果有些內(nèi)容不能滿足各位看官的胃口，提前說(shuō)聲抱歉并且請(qǐng)不要擔(dān)心，隨著項(xiàng)目的逐漸開(kāi)展，好戲會(huì)在后頭。

補(bǔ)充上篇的內(nèi)容

上一篇我提到了暫時(shí)使用 Ember.GlimmerComponent 取代 Ember.Component 的事情，雖然有效但是卻不得不改變編寫(xiě) Component 的接口，著實(shí)挺煩的。其實(shí)我們可以直接替換掉舊的 |0e610412be5446ac40810dba92904e3c2| 便好，于是我加了很簡(jiǎn)單的一句：

// app/app.js
// ...

Ember.MODEL_FACTORY_INJECTIONS = true

Ember.GlimmerComponent.reopenClass({
  isComponentFactory: true
})
Ember.Component = Ember.GlimmerComponent

App = Ember.Application.extend({...})

這樣你 Component 該怎么寫(xiě)就怎么寫(xiě)，不用再改了。

我是 Vim 黨，很少折騰復(fù)雜笨重的 IDEs，然而小伙伴們不高興了，紛紛表示 Vim 太難學(xué)還是要用 Webstorm（也有選擇 Sublime／Atom 的，由于配置比較簡(jiǎn)單，略過(guò)）。好，你用就用吧，各種問(wèn)題自己也不會(huì)看文檔問(wèn)谷歌，成天怨聲載道的（不得不吐槽一下現(xiàn)在的年輕人……）。沒(méi)辦法，我自己來(lái)一遍配置，填掉所有的坑！

Webstorm 以前用 Angular 的時(shí)候也試過(guò)，總體上還行，代碼補(bǔ)全比較優(yōu)秀，就是稍微有點(diǎn)慢；然而我是那種不依賴自動(dòng)補(bǔ)全，就是喜歡手打的類(lèi)型，所以還是輕便迅捷的 Editor 合我的胃口。這次換成搭配 Ember 和 Ember CLI 了，好家伙～各種小問(wèn)題層出不窮，官方就是不支持你也沒(méi)有辦法，最終我只能整理一下力所能及的配置過(guò)程了——

在 Webstorm 導(dǎo)入 Ember CLI 創(chuàng)建好的項(xiàng)目之后，打開(kāi)［Preferences -> Project -> Directories］，然后針對(duì)項(xiàng)目里的各種目錄打一些必要的標(biāo)記；如圖：

簡(jiǎn)要解釋一下這三個(gè)標(biāo)記的作用：

Tests：標(biāo)記測(cè)試文件所在的根路徑；對(duì)于很多測(cè)試框架來(lái)說(shuō)這是 Webstorm 給它們指示測(cè)試文件位置的標(biāo)志，然而由于并不支持 Ember CLI 所以沒(méi)什么鳥(niǎo)用——當(dāng)然你可以嘗試?yán)@過(guò) Ember CLI 直接配置基于 QUnit 的測(cè)試環(huán)境，難～

Excluded：該標(biāo)記作用下的文件夾會(huì)被 Webstorm 內(nèi)部的各種機(jī)制排除在外，比如說(shuō)代碼補(bǔ)全、狀態(tài)監(jiān)視（版本控制）、項(xiàng)目結(jié)構(gòu)解析（常用于重構(gòu)等）等等；主要的作用就是提速——你把 tmp/ 去掉這個(gè)標(biāo)記試試看！

Resource Root：標(biāo)記靜態(tài)資源的位置；之后在代碼內(nèi)但凡出現(xiàn)相對(duì)路徑的資源索引，都會(huì)從這里面來(lái)找，比如說(shuō) HTML 里面的 src 屬性和 CSS 里面的 url() 等等……

OK，后面兩個(gè)其實(shí)是調(diào)整 Webstorm 性能與功能的關(guān)鍵平衡點(diǎn)，標(biāo)記的過(guò)少會(huì)導(dǎo)致很多智能特性發(fā)揮不了用處，反之則會(huì)嚴(yán)重降低 IDE 的運(yùn)行性能。我 09 年的老爺機(jī)通過(guò)合理配置（和上圖那個(gè) Demo 不完全一樣，需要自己摸索）之后跑得比最新的 MBP 還順暢我會(huì)隨便亂講？

目前版本的 Ember CLI 已經(jīng)全面支持 ES6 了，所以這里的選擇是理所當(dāng)然的；

嚴(yán)格模式不用選，因?yàn)?Ember CLI 創(chuàng)建的代碼都是基于 ES6 Modules 的，默認(rèn)都是嚴(yán)格模式，不需要 IDE 檢查；

最后一個(gè)選項(xiàng)決定了自動(dòng)代碼補(bǔ)全結(jié)果的豐富程度，不選會(huì)給你找出更多的補(bǔ)全項(xiàng)，但也意味著雜亂和性能損耗。

先跳到 node.js 和 npm 的配置，由于我們統(tǒng)一使用的是 io.js，所以如上圖所示對(duì)應(yīng)的路徑。

以前呢，io.js 的 sources 是不能在這里獲取到的，最近的版本應(yīng)該是修正了這個(gè)問(wèn)題。不過(guò)下載下來(lái)的 sources 被命名為 Node.js v3.2.0 Core Modules 由于我手動(dòng)改了它的名字（后面會(huì)講到），所以上圖里看起來(lái)還是未下載和配置 sources 的樣子。

這個(gè) sources 有什么用？當(dāng)你開(kāi)發(fā) node.js/io.js 模塊時(shí)，如果能有對(duì)核心庫(kù)的代碼補(bǔ)全、分析、調(diào)試、文檔等功能那自然是很爽。但是 node.js/io.js 把核心庫(kù)都封裝在了二進(jìn)制運(yùn)行命令中，IDE 無(wú)法直接獲取到，因此這些 sources 就是用來(lái)做上述功能的。

對(duì)于 Ember 應(yīng)用程序開(kāi)發(fā)來(lái)說(shuō)，以上是非必需的，沒(méi)有配置也沒(méi)什么影響。只不過(guò) Ember CLI 是工作于 node.js/io.js 環(huán)境下的，如果你經(jīng)常需要看相關(guān)模塊的代碼，或是 debugging 它們，這就派上用場(chǎng)了。

為什么使用 io.js？有關(guān) node.js 和 io.js 的糾結(jié)歷史可以去谷歌一下，此處不再啰嗦；最根本的原因就是 io.js 對(duì) ES6 的支持更好，更新和維護(hù)也更勤快。好消息是不久以后當(dāng) io.js 進(jìn)入 v4 的時(shí)候，node.js 和 io.js 將再次合并，從此以后將只有一個(gè) node.js v4 了。

node.js 和 npm 那邊配置好以后呢，在這里會(huì)出現(xiàn) Node.js v3.2.0 Core Modules，如上圖所示我已經(jīng)把它更名為 io.js v3.2.0 Core Modules 了。最上面那個(gè) ember-DefinitelyTyped 是 TypeScript 社區(qū)提供的 API Stubs，有助于快速的代碼補(bǔ)全提示。TS Community 還提供了大量的 JS 庫(kù)或框架的 API Stubs，非常便利。這些都可以在這個(gè)界面里搜索和安裝。

Ember CLI 集成了代碼質(zhì)量控制工具 JSHint，Webstorm 也有很棒的內(nèi)部支持，不過(guò)配置要跟著上圖來(lái)，否則是沒(méi)有用的。

這些是關(guān)于模版引擎的支持，現(xiàn)在 Ember 已經(jīng)使用了全新的模版引擎：HTMLBars，目前沒(méi)什么 IDE 有完整支持的，最貼近的還是 Handlebars 插件（可能需要自行安裝或開(kāi)啟，見(jiàn)［Preferences -> Plugins］）。

前兩個(gè)選項(xiàng)完全是看個(gè)人偏好

第三個(gè)不要選！選了之后會(huì)使用內(nèi)置的格式控制，但實(shí)際上并沒(méi)有針對(duì) Handlebars 的格式控制調(diào)整，因此據(jù)我觀察還是復(fù)用了 HTML 那一套，然而并不好用；Ember CLI 繼承了 EditorConfig（Webstorm 有對(duì)應(yīng)的插件支持），因此還是交給插件自己去控制，這樣可以獲得相對(duì)漂亮的代碼格式控制

第四個(gè)選項(xiàng)其實(shí)沒(méi)啥用處（在 Ember 項(xiàng)目里全是 .hbs，沒(méi)有 .html 什么事情），選不選都一樣

最后的注釋還是選擇 Handlebars 風(fēng)格比較好

Bower 的支持配置很簡(jiǎn)單，路徑選對(duì)就是了。

就這些，Webstorm 對(duì) Ember 和 Ember CLI 的支持也就這樣了，真心很有限，感覺(jué)有點(diǎn)對(duì)不起它的名聲呀，我覺(jué)得你們大家還是投入到 Vim 的懷抱來(lái)吧！

最后奉送一個(gè) tip，在 v2.3 的 Routable Components 到來(lái)之前有用的：

什么是 toplevel component/view 呢？就是應(yīng)用初始化后在 標(biāo)簽里插入的第一個(gè) DOM 元素，它通常是這樣的：

  
...

它看起來(lái)和其他的 components 差不多，唯一的問(wèn)題是如果你想改它的 tagName/elementId/classNames 等屬性的時(shí)候該怎么辦？

創(chuàng)建一個(gè) ApplicationComponent？沒(méi)用……創(chuàng)建一個(gè) ApplicationView？對(duì)不起，View 已經(jīng)沒(méi)了……

在 Routable Components 出來(lái)之前（其實(shí)這就是一個(gè)典型的 Routable Component），唯一修改它的辦法其實(shí)是創(chuàng)建一個(gè)叫 ApplicationView 的 Component——啥意思？看下面：

$ ember generate view application

然后編輯 app/views/application.js

import Ember from "ember"

export default Ember.Component.extend({
    tagName: "main",
    classNames: ["application"]
    ...
})

如上，它是一個(gè) Component，但要保存在 app/views 下面，否則是找不到的。

原文首發(fā)于 Ruby China 社區(qū)，轉(zhuǎn)載請(qǐng)注明。