使用Babel＆Gulp將ES6模塊轉換為AMD和COMPORJS

核心要點

• ECMAScript 6 (ES6) 對 JavaScript 做出了大量改進，以更好地適應其當前的使用規模，包括能夠以模塊的形式加載應用程序的不同部分。但是，並非所有瀏覽器都已實現所有 ES6 功能，這就是 Babel 和 Traceur 等轉譯器發揮作用的地方。
• Babel 和 Gulp 可用於將 ES6 模塊轉譯為 CommonJS 或 AMD，使它們能夠被當今的瀏覽器讀取。此過程涉及使用 Babel 的 Gulp 任務將模塊轉換為現有模塊系統之一，然後將應用程序打包為單個文件供瀏覽器使用。
• CommonJS 是一個同步模塊系統，由 Node.js 使用，它使用 require 函數加載模塊，並使用模塊對象的 exports 屬性導出它們。將 ES6 模塊轉換為 CommonJS 涉及結合使用 Babel、Browserify 和 Gulp。
• 異步模塊定義 (AMD) 系統允許並行加載多個依賴模塊。要將 ES6 模塊轉換為 AMD，我們使用 Babel、RequireJS 和 Gulp。然後可以直接在 index.html 頁面上引用最終腳本並在瀏覽器中查看。

ECMAScript 6（又名 ECMAScript 2015 或 ES6），下一版 JavaScript 的規範已獲批准，瀏覽器廠商正在努力實施它。與以前的 ECMAScript 版本不同，ES6 對語言做出了巨大的改變，使其能夠很好地適應當今的使用規模。 Sitepoint 有多篇文章介紹了這些功能。

儘管瀏覽器尚未實現所有功能，但我們仍然可以在開發過程中利用 ES6，並在交付應用程序之前將其轉換為瀏覽器可以理解的版本。 Babel 和 Traceur 是為此目的使用的兩種領先的轉譯器。 Microsoft 的 JavaScript 類型超集 TypeScript 也可以用作 ES6 轉譯器。

在我之前的一篇文章中，我介紹瞭如何使用 ES6 來編寫 Angular 1.x 應用程序。在那篇文章中，我使用了 Traceur 的即時轉譯器來運行應用程序。雖然它有效，但最好事先進行轉譯，並減少瀏覽器中需要完成的工作量。在本文中，我們將看到如何將相同的示例應用程序轉譯為 ES5，並將模塊轉換為 CommonJS 或 AMD，使用 Babel 使其能夠在當今的瀏覽器上運行。儘管示例基於 Angular，但轉譯技術可用於任何有效的 ES6 代碼。

與往常一樣，您可以在我們的 GitHub 倉庫中找到本文的配套代碼。

模塊的重要性

在用於編寫大型應用程序的任何語言中，一個關鍵功能是能夠以模塊的形式加載應用程序的不同部分。模塊不僅有助於使代碼更簡潔，而且還在減少全局作用域的使用方面發揮作用。除非其他模塊顯式加載它，否則模塊的內容不會提供給任何其他模塊。

模塊的重要性不僅限於應用程序。即使是大型 JavaScript 庫也可以利用模塊系統將它們的對象導出為模塊，並且使用這些庫的應用程序可以根據需要導入這些模塊。 Angular 2 和 Aurelia 已開始使用此功能。

如果您想快速了解如何在 ES6 中使用模塊，請閱讀：理解 ES6 模塊

關於示例應用程序

我們的示例應用程序的主題是虛擬書架。它包含以下頁面：

1. 首頁：顯示可以標記為已讀或移動到存檔的活動書籍列表。
2. 添加書籍頁面：通過接受書籍標題和作者姓名來向書架添加新書籍。它不允許重複標題。
3. 存檔頁面：列出所有存檔的書籍。

該應用程序使用 AngularJS 1.3 和 ES6 構建。如果您查看 app 文件夾中的任何文件，您將看到用於從當前模塊導出對像以及從其他模塊導入對象的關鍵字 export 和 import。現在，我們的工作是使用 Babel 的 Gulp 任務將這些模塊轉換為現有模塊系統之一。

但我沒有使用 Angular。我只想將 ES6 模塊轉換為 CommonJS/AMD

別擔心！我們已經為您準備好了。只需少量調整，下面演示的配方即可用於任何涉及 ES6 模塊的項目。 Angular 在這裡並不重要。

轉換為 CommonJS

CommonJS 是由 CommonJS 組定義的模塊系統。它是一個同步模塊系統，其中使用 require 函數加載模塊，並使用模塊對象的 exports 屬性導出模塊。模塊對象默認情況下應在所有模塊中可用。

Node.js 使用此模塊系統，因此它本機定義模塊對象並將其提供給您的應用程序。由於瀏覽器沒有定義此對象，因此我們需要使用名為 Browserify 的實用程序來填補空白。

在開始之前，我們還需要安裝一些 npm 包。這將使我們能夠結合使用 Babel 和 Browserify 與 Gulp，將我們的 ES6 模塊轉換為常見的模塊格式之一，並將應用程序打包為單個文件供瀏覽器使用。

• gulp-babel — 將 ES6 代碼轉換為普通的 ES5
• Browserify — 允許您在瀏覽器中 require('modules')，方法是捆綁所有依賴項
• vinyl-source-stream — 直接處理 Browserify 模塊，避免需要 gulp-browserify 包裝器
• vinyl-buffer — 將流轉換為緩衝區（對於不支持流的 gulp-uglify 來說是必要的）
• gulp-uglify — 壓縮文件
• del — 允許您刪除文件和文件夾
• gulp-rename — 一個允許您重命名文件的插件

您可以通過鍵入以下內容來獲取所有這些：

<code>npm install gulp-babel browserify gulp-browserify vinyl-source-stream vinyl-buffer gulp-uglify del gulp-rename --save-dev</code>

現在讓我們開始在我們的 gulpfile.js 中使用這些包。我們需要編寫一個任務來獲取所有 ES6 文件並將它們傳遞給 Babel。 Babel 中的默認模塊系統是 CommonJS，因此我們不需要向 babel 函數發送任何選項。

<code>var babel = require('gulp-babel'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    del = require('del');

gulp.task('clean-temp', function(){
  return del(['dest']);
});

gulp.task('es6-commonjs',['clean-temp'], function(){
  return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel())
    .pipe(gulp.dest('dest/temp'));
});
</code>

希望這裡沒有什麼太令人困惑的地方。我們正在聲明一個名為 es6-commonjs 的任務，它獲取 app 目錄及其任何子目錄中的任何 JavaScript 文件。然後它將它們通過 Babel 傳遞，Babel 又將各個文件轉換為 ES5 和 CommonJS 模塊，並將轉換後的文件複製到 dest/temp 文件夾中。 es6-commonjs 任務有一個名為 clean-temp 的依賴項，它將在 es6-commonjs 任務運行之前刪除 dest 目錄及其中的任何文件。

如果您想使代碼更明確並指定模塊系統，您可以修改 Babel 的用法如下：

<code>.pipe(babel({
  modules:"common"
}))
</code>

現在，我們可以通過應用 Browserify 並使用 uglify 包壓縮輸出，從這些單個文件中創建一個單個捆綁文件。以下代碼段顯示了這一點：

<code>gulp.task('bundle-commonjs-clean', function(){
  return del(['es5/commonjs']);
});

gulp.task('commonjs-bundle',['bundle-commonjs-clean','es6-commonjs'], function(){
  return browserify(['dest/temp/bootstrap.js']).bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename('app.js'))
    .pipe(gulp.dest("es5/commonjs"));
});
</code>

上述任務有兩個依賴項：第一個是 bundle-commonjs-clean 任務，它將刪除 es5/commonjs 目錄；第二個是前面討論的 es6-commonjs 任務。這些任務運行後，該任務將組合和壓縮後的文件 app.js 放入 es5/commonjs 文件夾中。此文件可以直接在 index.html 中引用，並且可以在瀏覽器中查看該頁面。

最後，我們可以添加一個任務來啟動操作：

<code>gulp.task('commonjs', ['commonjs-bundle']);
</code>

轉換為 AMD

異步模塊定義 (AMD) 系統，顧名思義，是一個異步模塊加載系統。它允許並行加載多個依賴模塊，並且它不會等待一個模塊完全加載後再嘗試加載其他模塊。

Require.js 是用於處理 AMD 的庫。 RequireJS 可通過 Bower 獲取：

<code>bower install requirejs --save</code>

我們還需要 Require.js 的 Gulp 插件來捆綁應用程序。為此，請安裝 gulp-requirejs npm 包。

<code>npm install gulp-requirejs --save-dev</code>

現在，我們需要編寫將 ES6 代碼轉換為 ES5 和 AMD 然後使用 RequireJS 捆綁它的任務。這些任務與 CommonJS 部分中創建的任務非常相似。

<code>var requirejs = require('gulp-requirejs');

gulp.task('es6-amd',['clean-temp'], function(){
    return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel({ modules:"amd" }))
    .pipe(gulp.dest('dest/temp'));
});

gulp.task('bundle-amd-clean', function(){
  return del(['es5/amd']);
});

gulp.task('amd-bundle',['bundle-amd-clean','es6-amd'], function(){
  return requirejs({
    name: 'bootstrap',
    baseUrl: 'dest/temp',
    out: 'app.js'
  })
  .pipe(uglify())
  .pipe(gulp.dest("es5/amd"));
});

gulp.task('amd', ['amd-bundle']);
</code>

要在 index.html 頁面上使用最終腳本，我們需要添加對 RequireJS、生成的腳本的引用，然後加載 bootstrap 模塊。 app 文件夾內的 bootstrap.js 文件引導 AngularJS 應用程序，因此我們需要加載它來啟動 AngularJS 應用程序。

<code> src="bower_components/requirejs/require.js" >>
 src="es5/amd/app.js">>
>
  (function(){
    require(['bootstrap']);
  }());
>
</code>

結論

模塊是 JavaScript 中長期以來一直缺乏的功能。它們將出現在 ES6 中，但不幸的是，它們當前的原生瀏覽器支持較差。但這並不意味著您今天無法使用它們。在本教程中，我演示瞭如何使用 Gulp、Babel 和各種插件將 ES6 模塊轉換為可在瀏覽器中運行的 CommonJS 和 AMD 格式。

至於 ES6？自發布以來，ES6 在社區中獲得了廣泛關注。它已被包括 Bootstrap 的 JavaScript 插件、Aurelia、Angular 2 和許多其他 JavaScript 庫或框架使用。 TypeScript 還添加了對包括模塊在內的一些 ES6 功能的支持。學習並使用今天的 ES6 將減少將來轉換代碼所需的努力。

使用 Babel 和 Gulp 將 ES6 模塊轉譯為 AMD 和 CommonJS 的常見問題解答 (FAQ)

使用 Babel 和 Gulp 將 ES6 模塊轉譯為 AMD 和 CommonJS 的目的是什麼？

使用 Babel 和 Gulp 將 ES6 模塊轉譯為 AMD 和 CommonJS 是一個過程，允許開發人員使用最新版本的 JavaScript (ES6) 編寫代碼，然後將其轉換為各種 JavaScript 引擎可以理解的版本。這特別有用，因為並非所有瀏覽器或環境都支持最新的 ES6 功能。通過轉譯代碼，開發人員可以確保他們的應用程序可以在不同的平台上順利運行。

Babel 如何幫助轉譯 ES6 模塊？

Babel 是一個 JavaScript 編譯器，主要用於將 ECMAScript 2015 (ES6 ) 代碼轉換為向後兼容的 JavaScript 版本，這些版本可以由較舊的 JavaScript 引擎運行。在轉譯 ES6 模塊時，Babel 提供了像“babel-plugin-transform-modules-commonjs”這樣的插件，這些插件將 ES6 模塊語法轉換為廣泛支持的 CommonJS 語法。

Gulp 在轉譯過程中扮演什麼角色？

Gulp 是一個任務運行器，可用於自動化轉譯過程。可以將其配置為監視 ES6 文件中的任何更改，並自動在其上運行 Babel 轉譯器。這使開發人員不必每次更改代碼時都手動運行轉譯器。

我可以將 ES6 模塊轉譯為 AMD 而不是 CommonJS 嗎？

是的，您可以將 ES6 模塊轉譯為異步模塊定義 (AMD) 而不是 CommonJS。 Babel 為此提供了名為“babel-plugin-transform-modules-amd”的插件。 AMD 在處理 Web 瀏覽器環境中的大量模塊時特別有用。

AMD 和 CommonJS 之間的區別是什麼？

AMD 和 CommonJS 都是模塊格式。它們之間的主要區別在於它們如何處理依賴項。 AMD 支持異步加載依賴項，這可以提高瀏覽器環境中的性能。另一方面，CommonJS 同步加載依賴項，這更簡單，並且在 Node.js 等服務器環境中運行良好。

如何指定要轉譯的 ES6 功能？

Babel 使用名為 .babelrc（或 babel.config.js）的配置文件，您可以在其中指定要轉譯的 ES6 功能。您可以在此文件中列出要使用的插件或預設。例如，要轉譯 ES6 模塊，您將在配置中包含“babel-plugin-transform-modules-commonjs”或“babel-plugin-transform-modules-amd”。

使用 ES6 模塊的好處是什麼？

ES6 模塊為 JavaScript 開髮帶來了許多好處。它們引入了一種用於從模塊導入和導出函數、對像或值的標準語法，這可以使您的代碼更井然有序且更易於管理。它們還支持靜態分析，這可以提高性能並在編譯時而不是運行時捕獲錯誤。

如何調試轉譯後的代碼？

調試轉譯後的代碼可能具有挑戰性，因為執行的代碼與您編寫的代碼不同。但是，Babel 通過源映射的形式為這個問題提供了解決方案。源映射是一個文件，它將轉譯後的代碼映射回原始源代碼，允許您調試代碼，就像它正在運行原始 ES6 代碼一樣。

我可以將 Babel 和 Gulp 與其他 JavaScript 框架一起使用嗎？

是的，Babel 和 Gulp 不與任何特定的 JavaScript 框架綁定。它們可以與任何支持 ES6 的框架一起使用，包括 React、Angular、Vue.js 等。

是否有 Babel 和 Gulp 的替代方案用於轉譯 ES6 模塊？

是的，Babel 和 Gulp 有幾種替代方案可用於轉譯 ES6 模塊。這些包括 TypeScript、Traceur 和 Rollup。這些工具各有優缺點，因此最佳選擇取決於您的特定需求和偏好。

以上是使用Babel＆Gulp將ES6模塊轉換為AMD和COMPORJS的詳細內容。更多資訊請關注PHP中文網其他相關文章！