[譯] 新一代 JavaScript 的開發圖譜（2017）

• 原文地址：A Map To Modern JavaScript Development
• 原文做者：Santiago de León
• 譯文出自：掘金翻譯計劃
• 譯者：gy134340
• 校對者：IridescentMia,Tina92

過去 5 年裏你一直使用 REST 接口。或者你一直在優化搜索公司裏龐大的數據庫。又或者你一直在給微波爐寫嵌入式軟件。自從你用 Prototype.js 來對瀏覽器進行面向對象編程已通過去好久了，如今你想提高一下你的前端技能，你看了一下發現狀況是這樣。

固然你不是要從一堆徐崢裏找出葛優，你在找 25 個連名字都不知道的人。這種狀況在 JavaScript 社區特別常見，以致於存在 「JavaScript 疲勞」 這個詞。當你有時間去看一些關於這個主題的有趣的東西的時候，你會看到在2016年學習JavaScript是怎樣的體驗？絕妙的反映了這個現象。

但你如今沒時間了，你在一個大迷宮裏，你須要一張地圖，因此我作了一張。

一點聲明在前：這是一張可讓你快速行動，沒必要作本身太多決定的做弊表。基本我會給通用的前端開發制定一套工具，這將會給你一個舒服的環境而不會讓你太頭疼。一旦你搞定了這些問題，你就能夠根據須要自信地調整技術棧。

地圖結構

我將會將這張地圖分爲幾個你須要解決的問題，對於每一個問題，我將會：

• 描述問題或工具需求
• 決定你須要選取哪一種工具
• 討論爲何這樣選
• 給一些其餘選擇

包管理

• 問題：須要管理項目和其依賴。
• 解決辦法：NPM 和 Yarn
• 緣由：NPM 是目前至關多的軟件包管理器。Yarn 基於 NPM 可是優化了依賴的解決方案，而且維護一個鎖文件（lock file），用來保存庫確切的版本號（它能夠集成在 NPM 中，它們是相輔相成而不是單獨存在的）。
• 可選：暫時未知。

JavaScript風格

• 問題：ECMAScript5 (老版本 JavaScript) 太爛。
• 解決辦法：ES6
• 緣由：這是將來的 JavaScript ，可是你能夠如今就用了。結合其餘多種語言有用的特性。好比說：箭頭函數、模塊導入/導出功能、解構、模版字符串、let 和 const、生成器、promises。若是你是寫 Python 的你會感受更舒服和習慣。
• 可選：TypeScript、CoffeeScript、PureScript、Elm

編譯

• 問題：許多瀏覽器目前不支持 ES6,你須要東西來把你現代的 ES6 編譯成 ES5。
• 解決辦法：babel
• 緣由：在服務端編譯，完美的解決辦法，也是事實上的標準。
• 可選：Traceur
• 注意：你須要使用 babel-loader，一個 Webpack loader (以及一些其餘的)，若是你計劃使用任何風格的 JavaScript 你都須要編譯。

Linting

• 問題：有一萬種寫 JavaScript 的方式因此很難達到一致性。一些 bug 能夠用 linter 檢查出來。
• 解決辦法：ESLint
• 緣由：完美的檢查和很好的可配置性。airbnb preset 值得遵循。對你熟悉新的語法絕對有幫助。
• 可選：JSLint

打包工具

• 問題：你不能使用分開的單獨文件，依賴須要被解析和正確的加載。
• 解決辦法：Webpack
• 緣由：高度可配置性，能夠加載全部的依賴和文件，支持熱插拔。事實上，他是 React 項目的打包工具。
• 可選：Browserify
• 不利性：一開始可能很難配置
• 注意：你須要一點時間來了解這東西是怎樣工做的，你還須要瞭解一點 babel-loader、style-loader、 css-loader、file-loader、url-loader。

測試

• 問題：你的應用很脆弱，很容易崩潰，因此你須要測試。
• 解決辦法：mocha (測試運行)，chai (斷言庫) 和 chai-spies (對於假的對象，你能夠查詢某些事件應不該該發生)。
• 緣由：使用簡單，功能強大。
• 可選：Jasmine、Jest、Sinon、Tape。

UI 庫／狀態管理

• 問題：這是你們夥，單頁應用愈來愈複雜，狀態管理也很麻煩
• 解決辦法：React 和 Redux
• 使用 React 的緣由：使人興奮的範式轉變，打破許多 web 領域的教條更好的實現。關注比傳統方法更好的分離：取代分離 HTML/CSS/JavaScript 而採起組件化的思想。你的交互界面只是狀態的反映。
• 使用 Redux 的緣由：若是你的應用不是很輕量，你須要你個東西來管理狀態 （不然你疲於對於組件間的交互與數據傳遞，以及組件化的侷限性）。網上的每個採起抽象的 Flux 架構模式的解決辦法對會讓你擺脫迷惑。幫助你節省時間直接採用 Redux 就好了。 他的實現模式很精簡。即便 Facebook 也使用他。另外的美妙之處：重載並保持應用狀態，可測試性。
• 可選：Angular二、Vue.js。
• 警告：當你第一次看到 JSX 風格的代碼你可能會很吃驚。而後找一個社區大喊，這是多年來認知的失調，事實上將 HTML、JavaScript 和 CSS 寫在一塊兒是很棒的。相信我— 不須要在一個文件裏寫兩個蹩腳的引用。

DOM 操做和動畫

• 問題：猜猜看？當你在選擇元素和執行操做 DOM 節點時你仍然須要一點權宜之計。
• 解決辦法：原生 ES6 或者 jQuery。
• 緣由：是的，jQuery還活着，React 和 jQuery 並不衝突，你的大多數需求均可以用 vanilla React 來實現 (和querySelector)。添加 jQuery 將會使你的打包速度變慢，我想說在 React 上使用 jQuery 不是很好你應當避免他。若是你被 ES6 和 React 不能解決的問題卡住了，或者你正在處理討厭的跨瀏覽器問題，也許須要使用一下jQuery。
• 可選：Dojo (不知還在不？)。

樣式

• 問題：如今你有了正確的模塊，你但願他們都是獨立的而且能夠有組織化的重用。組件化的樣式應該像組件自己同樣輕便。
• 解決辦法：CSS 模塊化。
• 緣由：我喜歡內聯樣式（而且普遍的使用），我必須認可他們有不少弱點。是的，在 React 內能夠寫行內樣式，可是你不能使用僞類選擇器（好比:hover），這將會致使不少問題。
• 可選：內聯樣式。我特別喜歡內聯風格的緣由是他們把樣式看做常規的 JavaScript 對象，可讓你程序化的處理。另外，他們在你每個的組件文件裏，可讓你更好的維持。一些人仍推薦 SASS/SCSS/Less。這些語言意味着額外的構建步驟，他們並不像 CSS 模塊／內聯風格同樣便攜，可是功能強大。

就這樣

你如今有一堆的東西來學習，但至少你不要在花費時間來作調查了。若是發現我少作了或者漏了什麼東西？在 twitter 上給我留言或者評論吧 @bug_factory。

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。