命令行工具

大多數(shù)庫和框架都配備有一個(gè)命令行工具，通過輸入一個(gè)命令，可以為我們啟動(dòng)一些框架項(xiàng)目，以快速創(chuàng)建我希望的東西。這通常包括一個(gè)啟動(dòng)腳本（有時(shí)用自動(dòng)重新加載器），構(gòu)建腳本，測(cè)試結(jié)構(gòu)等等。當(dāng)我們創(chuàng)建新項(xiàng)目時(shí)，這些工具可以減輕我們大量冗余文件的編寫。讓我們來看看更多其他的一些命令行工具。

Webpack 配置

配置你的 webpack 構(gòu)建過程并真正理解你在做什么，可能是 2017 年更令人畏懼的學(xué)習(xí)曲線之一。幸運(yùn)的是，他們的核心貢獻(xiàn)者之一?Sean Larkin?奔走在世界各地，為我們提供了很棒的演講和非常有趣和有用的教程。

現(xiàn)在許多框架不僅為您創(chuàng)建了 webpack 配置文件，甚至將它們填充到您甚至可能不需要看的地步。Vue 的 CLI 工具有一個(gè)?webpack 專用的模板，為您提供全功能的 Webpack 設(shè)置。為了讓您充分了解命令行工具提供的內(nèi)容，以下是 Vue CLI 模板包含的內(nèi)容：

• npm run dev:?首要開發(fā)體驗(yàn)

  • 用于?Vue 單文件組件的 Webpack +?vue-loader

  • 熱更新中的狀態(tài)保持

  • 編譯錯(cuò)誤時(shí)的狀態(tài)保持

  • 保存時(shí)使用 ESLint?檢查

  • 源文件映射（Source Map）

• npm run build:?為生產(chǎn)環(huán)境準(zhǔn)備好構(gòu)建

  • 使用?UglifyJS v3?最小化 JavaScript

  • 使用?html-minifier?最小化 HTML

  • 使用?cssnano?提取所有組件中的 CSS?并最小化

  • 對(duì)靜態(tài)資源計(jì)算?Hash?使之在緩存中長(zhǎng)期有效，并自動(dòng)為生產(chǎn)環(huán)境生成使用這些靜態(tài)資源 URL?的 index.html

  • 使用 npm run build --report?構(gòu)建并生成含有流量分析的報(bào)告

• npm run unit:?使用?Jest? 在?JSDOM?中運(yùn)行單元測(cè)試，或者在?PhantomJS?中使用?Karma + Mocha + karma-webpack

  • 測(cè)試文件支持 ES2015+

  • 簡(jiǎn)單打樁

• npm run e2e:?使用?Nightwatch?進(jìn)行端到端測(cè)試

  • 自動(dòng)處理 Selenium?和 chromedriver?依賴

  • 自動(dòng)生成 Selenium?服務(wù)器

  • 在多個(gè)瀏覽器中并行地運(yùn)行測(cè)試

  • 使用一個(gè)非常好的命令行工具：

preact-cli，從另一個(gè)方面支持著 Webpack?的功能。如果你需要自定義 webpack?配置，只需要?jiǎng)?chuàng)建 preact.config.js，它導(dǎo)出一個(gè)函數(shù)來改變 webpack。大量的工具帶來了大量的便捷性，開發(fā)人員們也在相互幫助。

Babel：啟用還是關(guān)閉

弄明白了嗎？Babel 聽起來像巴比倫(Babylon)。我都快崩潰了。我并沒有試圖將 Babel 與 Babylon 聯(lián)系在一起，但有人說過我們可能會(huì)放棄對(duì)轉(zhuǎn)譯(transpiling)的依賴。在過去幾年里，Babel 一直是個(gè)大問題，因?yàn)槲覀兿胍?ECMAScript 提出的所有美好的特性，但又并不想等待瀏覽器跟上更新。隨著 ECMAScript 轉(zhuǎn)向年度小版本發(fā)布，瀏覽器可能會(huì)跟上。剔除一些非常棒的?kangax?兼容性圖表的 JavaScript 發(fā)布是什么樣的呢？

這些圖表的截圖不是很清晰，因?yàn)槲蚁胝故舅鼈兛雌饋硎嵌嗝吹木G！更多有關(guān)詳細(xì)信息，請(qǐng)單擊圖像下方的鏈接以進(jìn)一步查看圖表。

es6 的兼容性

2016+ 的兼容性

在第一張圖中，左側(cè)的紅色塊是編譯器（例如es-6 shim，Closure等）和較舊的瀏覽器（例如Kong 4.14和IE 11）。右邊的五個(gè)紅色列是服務(wù)器/編譯器PJS、JXA、Node 4、DUK 1.8和DUK 2.2。在較低的圖上，看起來像一只狗并且亂七八糟的感嘆號(hào)的糟糕圖形的紅色區(qū)域是僅使用Node 6.5+具有綠色條紋的服務(wù)器/運(yùn)行時(shí)。左邊紅色方塊的構(gòu)成是編譯器/polyfils和IE 11。更重要的是，看看那些綠的！在最流行的瀏覽器中，我們幾乎都是綠色的。2017年功能中的唯一紅色標(biāo)記是Firefox 52 ESR for Shared Memory和Atomics。

從一些角度來看，這里是來自維基百科的一些瀏覽器使用情況。

好的，關(guān)閉Babel可能會(huì)有點(diǎn)麻煩，因?yàn)楫?dāng)它落實(shí)之時(shí)，我們希望其能被盡可能多的用戶盡可能地訪問Babel。想想下我們可能能夠擺脫那個(gè)額外的步驟，在我們沒有使用轉(zhuǎn)譯器之時(shí)。

Tocy 翻譯于 5個(gè)月前 1人頂 頂?翻譯得不錯(cuò)哦！

談?wù)?TypeScript

如果我們?cè)谡?JavaScript，那就不得不談?wù)?span style="font-size:13.3333px;">?TypeScript。5?年前從微軟辦公室誕生的 TypeScript?發(fā)展到 2017?年，已經(jīng)非常酷了。幾乎沒有什么會(huì)議在談?wù)摗拔覀優(yōu)槭裁聪矚g?TypeScript”，但它為開發(fā)帶來了新的體驗(yàn)，自然受到人們喜歡。對(duì)于?TypeScript，不需要贊美，我們只是談?wù)勯_發(fā)者在使用它的時(shí)候?yàn)槭裁磿?huì)感到輕松。

對(duì)于想在?JavaScript?中使用類型的人來說，TypeScript?在語法上是?JavaScript?的超集，為其帶來了靜態(tài)類型。如果你喜歡這種東西，就會(huì)覺得非常酷。當(dāng)然，如果你看到了?JavaScript 狀態(tài)調(diào)查的最新結(jié)果，你會(huì)發(fā)現(xiàn)實(shí)際上很多人都喜歡。

來自?JavaScript?的狀態(tài)

我們看看 Brian Terlson?是怎么說的：

作為 2014?年為?JavaScript?提議加入類型的人，我不認(rèn)為類型會(huì)在較短時(shí)間內(nèi)實(shí)現(xiàn)。從標(biāo)準(zhǔn)的角度來說，這是一個(gè)極其復(fù)雜的問題。對(duì)于TypeScript 用戶來說，采用?TypeScript?標(biāo)準(zhǔn)當(dāng)然無可非議，不過也有其它一些J avaScript?超集支持類型，它們支持著一些相當(dāng)重要的用法，比如?Closure Compiler?和?FLow。這些工具的行為各不相同，甚至不清楚它們是否存在一個(gè)共同的子集（我不認(rèn)為有直觀的表現(xiàn)）。我不確定類型標(biāo)準(zhǔn)更像哪一個(gè)，我和其他人會(huì)繼續(xù)進(jìn)行相關(guān)的調(diào)查研究，這可能是有意義的工作，但不要希望在短期內(nèi)完成 -??HashNode AMA with Brian Terlson 邊城 翻譯于 5個(gè)月前 1人頂 頂?翻譯得不錯(cuò)哦！

TypeScript 喜歡 Flow

在 2017 年，你大概看到了很多帖子在討論?TypeScript + Flow 的組合。Flow?是?JavaScript的靜態(tài)類型檢查器。 通過 Flow 你可以在圖表中看到 JavaScript 的狀態(tài)，這里面的內(nèi)容包含了你感興趣和不感興趣的。盡管很多人還沒有聽說過 Flow，但是他們應(yīng)該會(huì)對(duì)一些狀態(tài)感興趣。如果人們?cè)?2018 年學(xué)習(xí)了更多的 Flow，那他們就會(huì)發(fā)現(xiàn)?Minko Gechev?所做的有用的事：

TypeScript 和 Flow 消除了你的產(chǎn)品中大約 15% 的 bug！ 還覺得類型系統(tǒng)沒有用么？?https://t.co/koG7dFCSgF

Angular 喜歡 TypeScript

你可能注意到在 Angular 文檔中所有的代碼例子就是由?TypeScript 寫的。曾經(jīng)在某個(gè)時(shí)候，有一種建議，你應(yīng)該選擇過一遍?JavaScript?或者?TypeScript 的手冊(cè)，不過，看起來 Angular 的心已經(jīng)動(dòng)搖了。查看連接 Angular 到 JS 風(fēng)格的圖表，我們會(huì)看到實(shí)際上有一小部分會(huì)被Angular 連接到 ES6（TypeScript: 3777, ES6: 3997）。我們靜待它在 2018 對(duì) Angular 的影響。

來自?JavaScript的狀態(tài)

無若 翻譯于 5個(gè)月前 1人頂 頂?翻譯得不錯(cuò)哦！

有關(guān)如何為您的下一個(gè)應(yīng)用程序選擇正確的 JavaScript 框架的一些專家建議，請(qǐng)參閱此白皮書。

毫無疑問，我們的 JavaScript 將在 2018 年快速發(fā)展。作為程序員，我們喜歡編寫和使用那些讓我們的生活更輕松的工具。不幸的是，這有時(shí)會(huì)導(dǎo)致更多的混亂和太多的選擇。值得慶幸的是，命令行工具正在幫助我們減輕一些煩瑣的工作，并且 TypeScript 已經(jīng)滿足了那些對(duì)類型錯(cuò)誤感到厭惡的開發(fā)者。

JavaScript 的未來

想要深入了解我們?cè)?JavaScript 的發(fā)展方向？ 不妨查看我們的最新文章“2018 年 JavaScript 的未來及遠(yuǎn)方”

原文發(fā)布時(shí)間為：2018年01月15日

原文作者：oschina

本文來源開源中國(guó)如需轉(zhuǎn)載請(qǐng)聯(lián)系原作者

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的2018 年，我们该如何使用 JavaScript？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。