用ES6構建新一代可複用JS模組

青衫無名發表於2018-06-01
JS

你是不是也在為可以使用ES6的新特性而興奮，卻不太確定應該從哪開始，或者如何開始？不止你一個人這樣！我已經花了一年半的時間去解決這個幸福的難題。在這段時間裡 JavaScript 工具鏈中有幾個令人興奮的突破。

這些突破讓我們可以用ES6書寫完全的JS模組，而不會為了一些基本的條件而妥協，比如testing，linting 和（最重要的）其他人可以輕易理解我們所寫的程式碼。

在這篇文章中，我們集中精力在如何用ES6構建JS模組，並且無論你在你的網站或者app中使用CommonJS，AMD（asynchronous module definition）或者普通的網頁script引入，這個模組都可以輕易被引用。

The Tools

在這個系列文章的第一部分和第二部分，我們來看一下這些卓越的工具們。在這篇文章中，我們詳細說明如何編寫，編譯，打包程式碼；而在第二篇文章會集中在linting，formatting 和 testing（利用 JSCS，ESLint，mocha，Chai，Karma 和 Istanbul）。讓我們來看看在這篇文章中涉及到的工具：

  • Babel(剛剛度過了它的第一個生日)可以把ES6程式碼轉化為ES5程式碼，不僅簡單，而且優雅。

  • Webpack，webpack平寂了我們組裡的“模組戰爭”，我們每個人都鎮定得使用著webpack來應付_一切_(CommonJS，AMD 和 ES6)。它也在打包獨立的ES6庫方面做得非常棒——這是我們在過去一直渴望看到的。

  • Gulp一個強大的自動化構建工具。

The Goal
WRITE IN ES6, USE IN ES5

我們將要討論的是書寫客戶端（client-side）ES6 _libraries_，而不是整個網站或者 app 。（無論是在你的開源專案裡或者是在你工作中的軟體專案，這是可以在不同的專案中可複用的程式碼。）”等一下！“，你可能會想：”這個難道不是在瀏覽器支援ES6之後才能實現的嗎？“

你是對的！然而，我們利用上面提到的Babel可以把ES6程式碼轉化為ES5程式碼，在大多數情況下現在就可以實現我們的目標。

MAKE IT EASY FOR ANYONE TO CONSUME

我們目標的第二部分是寫一個無論在什麼模組規範下都可以使用的JS模組。AMD死忠飯？你會得到一個可用的模組。CommonJS 加 browserify 才是你的最愛？沒問題！你會得到一個可用的模組。或者你對AMD和CommonJS不感冒，你只是想要在你的頁面上加一個

你會看到我們已經依賴legoQuotes.js（就在babel的browser-polyfill.js下面），就像其他依賴一樣使用

原文釋出時間：2016-02-09

原文作者：MrDream

本文來源掘金如需轉載請緊急聯絡作者


相關文章