検索

ホームページ >ウェブフロントエンド >jsチュートリアル >babel＆gulpを使用して、amd＆commonjsにES6モジュールを導入する

babel＆gulpを使用して、amd＆commonjsにES6モジュールを導入する

William Shakespeare
William Shakespeareオリジナル
2025-02-19 12:46:13704ブラウズ

Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp

コアポイント

  • ecmascript 6（ES6）は、モジュールの形でアプリケーションのさまざまな部分をロードする機能など、現在の使用スケールに適しているため、JavaScriptに多くの改善を行いました。ただし、すべてのブラウザがすべてのES6機能を実装しているわけではなく、そこでバベルやトレーサーなどの翻訳者が登場します。
  • BABELとGULPを使用して、ES6モジュールをCommonJSまたはAMDに変換して、今日のブラウザで読み取ることができます。このプロセスでは、BabelのGulpタスクを使用して、モジュールを既存のモジュールシステムの1つに変換し、ブラウザを使用するためにアプリケーションを単一のファイルにパッケージ化します。
  • commonJSは、node.jsで使用される同期モジュールシステムであり、必要な関数を使用してモジュールをロードし、モジュールオブジェクトのエクスポートプロパティを使用してエクスポートします。 ES6モジュールをCommonJSに変換するには、BABEL、BROWSERIFY、およびGULPの組み合わせの使用が含まれます。
  • ASYNCモジュール定義（AMD）システムを使用すると、複数の従属モジュールを並行してロードできます。 ES6モジュールをAMDに変換するには、Babel、Requirejs、およびGulpを使用します。その後、index.htmlページで最終スクリプトを直接参照して、ブラウザで表示できます。

ECMAScript 6（別名ECMAScript 2015またはES6）、JavaScriptの次のバージョンの仕様が承認され、ブラウザーベンダーがそれを実装するために取り組んでいます。 ECMAScriptの以前のバージョンとは異なり、ES6は言語に大きな変化をもたらし、今日の使用スケールに適応できるようにしました。 SitePointには、これらの機能をカバーするいくつかの記事があります。

ブラウザはまだすべての機能を実装していませんが、開発中にES6を利用して、ブラウザが配信する前に理解できるバージョンに変換することができます。 BabelとTraceurは、この目的に使用される主要な翻訳者の2人です。 MicrosoftのJavaScript Type SuperSet Typescriptは、ES6翻訳者としても使用できます。

前の記事では、ES6を使用してAngular 1.xアプリケーションを書き込む方法を説明しました。その投稿では、Traceurのインスタント翻訳者を使用してアプリケーションを実行しました。動作しますが、事前に翻訳して、ブラウザで行う必要がある作業量を減らすことをお勧めします。この記事では、同じサンプルアプリケーションをES5に翻訳し、モジュールをCommonJSまたはAMDに変換する方法を確認します。BABELを使用して、今日のブラウザで実行できるようにします。例はAngularに基づいていますが、有効なES6コードに翻訳手法を使用できます。

いつものように、GitHubリポジトリにこの記事の添付のコードを見つけることができます。

モジュールの重要性

大規模なアプリケーションを作成するために使用されるあらゆる言語では、重要な機能は、アプリケーションのさまざまな部分をモジュールの形でロードできることです。モジュールは、コードをより簡潔にするのに役立つだけでなく、グローバル範囲の使用を削減する役割を果たします。モジュールの内容は、明示的にロードされない限り、他のモジュールに提供されません。

モジュールの重要性は、アプリケーションに限定されません。大規模なJavaScriptライブラリでさえモジュールシステムを使用してオブジェクトをモジュールとしてエクスポートし、これらのライブラリを使用するアプリケーションは必要に応じてこれらのモジュールをインポートできます。 Angular 2とAureliaはこの機能の使用を開始しました。

をご覧ください。 サンプルアプリケーションについて

サンプルアプリケーションのテーマは仮想本棚です。次のページが含まれています：

Home：読み取りまたはアーカイブに移動したとマークできるアクティブな本のリストを表示します。

    本ページの追加：本のタイトルと著者名を受け入れて、本棚に新しい本を追加します。重複したタイトルは許可されていません。
    2. アーカイブページ：すべてのアーカイブされた本をリストします。
  3. アプリケーションは、AngularJS 1.3およびES6を使用して構築されています。アプリフォルダー内のファイルを見ると、現在のモジュールからオブジェクトをエクスポートし、他のモジュールからオブジェクトをインポートするためのキーワードのエクスポートとインポートが表示されます。ここで、私たちの仕事は、これらのモジュールをBabelのGulpタスクを使用して既存のモジュールシステムの1つに変換することです。
しかし、私は角度を使用していません。 ES6モジュールをcommonjs/amd

に変換したいだけです

心配しないでください！私たちはあなたのために準備ができています。ほんの少しの微調整を行うと、以下に示すレシピは、ES6モジュールを含むプロジェクトで使用できます。ここでは角度は関係ありません。

commonjs

に変換します CommonJSは、CommonJSグループによって定義されたモジュールシステムです。これは、モジュールが要求関数を使用してロードされ、モジュールオブジェクトのエクスポートプロパティを使用してモジュールがエクスポートされる同期モジュールシステムです。モジュールオブジェクトは、デフォルトですべてのモジュールで利用できるようにする必要があります。

node.jsはこのモジュールシステムを使用するため、モジュールオブジェクトをネイティブに定義し、アプリケーションに提供します。ブラウザはこのオブジェクトを定義していないため、Gapを入力するにはBrowserifyというユーティリティを使用する必要があります。

また、開始する前にいくつかのNPMパッケージをインストールする必要があります。これにより、Babelを使用してGulpでブラウスライフィを使用して、ES6モジュールを共通モジュール形式の1つに変換し、ブラウザを使用する単一のファイルとしてアプリケーションをパッケージ化できます。

gulp-babel - es6コードを通常のes5

に変換します

browserify - すべての依存関係をバンドルすることで、ブラウザに（ 'モジュール'）を要求することができます
  • ビニールソースストリーム - gulp-browsifyラッパーの必要性を回避するために、browserifyモジュールを直接処理します
  • ビニールバッファー - ストリームをバッファーに変換します（ストリームをサポートしない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>

    ここにはあまりにも混乱していることがないことを願っています。 APPディレクトリおよびサブディレクトリにJavaScriptファイルを取得するES6-Commonjsと呼ばれるタスクを宣言しています。次に、それらをBabelに渡し、それにより個々のファイルをES5およびCommonJSモジュールに変換し、変換されたファイルをDest/Tempフォルダーにコピーします。 ES6-CommonJSタスクには、ES6-CommonJSタスクが実行される前に、Dest Directoryとそのファイルを削除するClean-Tempと呼ばれる依存関係があります。

    コードをより明確にし、モジュールシステムを指定する場合は、次のようにBabelの使用を変更できます。 

    <code>.pipe(babel({
  modules:"common"
}))
</code>
    これで、Uglifyパッケージを使用してBrowserifyを適用し、出力を圧縮することにより、これらの単一ファイルから単一のバンドルファイルを作成できます。次のコードスニペットにこれを示しています：

    <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>
    上記のタスクには2つの依存関係があります。1つ目は、ES5/CommonJSディレクトリを削除するバンドルコモンJSクリーンタスクです。これらのタスクが実行された後、タスクは組み合わせたファイルAPP.jsをES5/CommonJSフォルダーに入れます。このファイルはindex.htmlで直接参照でき、ページはブラウザで表示できます。

    最後に、操作を開始するためのタスクを追加できます：

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

    amd に変換します

    ASYNCモジュール定義（AMD）システムは、名前が示すように、非同期モジュールの負荷システムです。複数の従属モジュールを並行してロードできるようになり、他のモジュールをロードしようとする前に、1つのモジュールが完全にロードされるのを待ちません。

    require.jsは、AMDを処理するために使用されるライブラリです。 requirejsは、bower：

    から入手できます

    また、アプリケーションをバンドルするために、require.jsのGulpプラグインも必要です。これを行うには、Gulp-Requirejs NPMパッケージをインストールします。 
    <code>bower install requirejs --save</code>

    次に、ES6コードをES5に変換してAMDに変換し、requireJSでバンドルするタスクを作成する必要があります。これらのタスクは、CommonJSセクションで作成されたタスクと非常に似ています。 
    <code>npm install gulp-requirejs --save-dev</code>

    index.htmlページで最終スクリプトを使用するには、requirejs、生成されたスクリプトへの参照を追加してから、ブートストラップモジュールをロードする必要があります。 APPフォルダー内のBootStrap.jsファイルはAngularJSアプリケーションを起動するため、AngularJSアプリケーションを起動するにはロードする必要があります。 
    <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>

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

    モジュールは、JavaScriptが長い間欠いていた機能です。彼らはES6に登場しますが、残念ながら、現在のネイティブブラウザのサポートは貧弱です。しかし、それは今日それらを使用できないという意味ではありません。このチュートリアルでは、Gulp、Babel、およびさまざまなプラグインを使用してブラウザで実行できるCommonJSおよびAMD形式にES6モジュールを変換する方法を示します。

    ES6については

    ？ ES6はリリース以来、コミュニティで多くの注目を集めています。 Bootstrap、Aurelia、Angular 2、および他の多くのJavaScriptライブラリまたはフレームワークを含むJavaScriptプラグインによって使用されています。 TypeScriptは、モジュールを含むいくつかのES6機能のサポートも追加します。今日のES6の学習と使用は、将来のコードを変換するために必要な努力を削減します。

    ES6モジュールをAMDに変換するためのFAQ（FAQS）BABELとGULP BabelとGulpを使用してES6モジュールをAMDとCommonJSに変換する目的は何ですか？ BabelとGulpを使用してES6モジュールをAMDとCommonJSに変換することは、開発者がJavaScript（ES6）を使用してコードを作成し、さまざまなJavaScriptエンジンが理解できるバージョンに変換できるプロセスです。これは、すべてのブラウザや環境が最新のES6機能をサポートしているわけではないため、特に便利です。コードを翻訳することにより、開発者はさまざまなプラットフォームでアプリケーションがスムーズに実行されるようにすることができます。 BabelはES6モジュールの翻訳をどのように翻訳しますか？

    Babelは、主にECMAScript 2015（ES6）コードを古いJavaScriptエンジンが実行できる後方互換JavaScriptバージョンに変換するために使用されるJavaScriptコンパイラです。 ES6モジュールを翻訳するとき、Babelは、ES6モジュールの構文を広くサポートされているCommonJS構文に変換する「Babel-Plugin-Transform-Modules-Commonjs」などのプラグインを提供します。

    翻訳プロセスにおいて、Gulpはどのような役割を果たしますか？

    Gulpは、翻訳プロセスの自動化に使用できるタスクランナーです。 ES6ファイルの変更を監視し、Babel翻訳者を自動的に実行するように構成できます。これにより、開発者はコードを変更するたびに翻訳者を手動で実行できます。

    commonjsの代わりにES6モジュールをAMDに翻訳できますか？

    はい、ES6モジュールをCommonJSの代わりに非同期モジュール定義（AMD）に変換できます。 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-Modules-Modules-Commonjs」または「Babel-Plugin-Transform-Modules-Amd」を構成に含めます。

    ES6モジュールを使用することの利点は何ですか？

    ES6モジュールは、JavaScript開発に多くの利点をもたらします。彼らは、モジュールから機能、オブジェクト、または値をインポートおよびエクスポートするための標準的な構文を導入し、コードをより整理して管理しやすくすることができます。また、静的分析もサポートします。これは、パフォーマンスを向上させ、実行時間ではなくコンパイル時にエラーをキャッチします。

    翻訳されたコードをデバッグする方法は？

    翻訳されたコードのデバッグは、実行されたコードが書いたコードとは異なるため、困難な場合があります。ただし、バベルはソースマッピングの形式を通じてこの問題の解決策を提供します。ソースマップは、翻訳されたコードを元のソースコードに戻すファイルであり、元のES6コードを実行しているときと同じようにコードをデバッグできるようにします。

    他のJavaScriptフレームワークでBabelとGulpを使用できますか？

    はい、バベルとガルプは特定のJavaScriptフレームワークに縛られていません。それらは、React、Angular、Vue.jsなど、ES6対応フレームワークで使用できます。

    ES6モジュールの翻訳のためのBabelとGulpに代わるものはありますか？

    はい、ES6モジュールの翻訳に使用できるバベルとガルプにはいくつかの選択肢があります。これらには、TypeScript、Traceur、およびRollupが含まれます。これらのツールにはそれぞれ長所と短所があるため、最良の選択は特定のニーズと好みに依存します。

以上がbabel＆gulpを使用して、amd＆commonjsにES6モジュールを導入するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript typescript bootstrap ecmascript gulp html es6 npm angular require using JS 对象 作用域 异步 transform github microsoft 自动化
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Google CardboardとThree.jsを使用してVRをWebに持ち込む次の記事：Google CardboardとThree.jsを使用してVRをWebに持ち込む

関連記事

続きを見る