Es6 で書かれたファイル インポート ソリューション (詳細な解釈)

この記事では、主に es6 で書かれたファイルをインポートする方法に関する関連情報を紹介します。必要な友人は参考にしてください。

この間、es6 の新しい仕様について少し学び、その後、気まぐれに、 ES6 を使用してみてください。作成したコードはブラウザで実行されます。

最初に実装手順について説明します

1. ES6 コードを ES5 に変換します。

2. html ファイルを翻訳された ES5 に変換します。

3. それからブラウザ環境で実行します。

4. ノード環境;

次に、私のディレクトリ構造の一部、大まかなプレビューを示します。

src、es6 開発ディレクトリ

dist、es5 本番ディレクトリ

test、テストディレクトリ

次に、私の ES6 によって開発されたいくつかの js がどのように見えるかを見てみましょう。

file file2 app

test

次に、dist で翻訳されたファイルを HTML

に導入し、ブラウザでテストします。テストではモジュールが導入されていないため、通常どおり実行されます。モジュールが導入されており、CommonJS 仕様ですが、ブラウザがこの仕様をサポートしていないため、エラーが報告されます

テスト目的で、HTML に requireJS ファイルを追加すると、ブラウザAMD/CMD仕様をサポートします。定義を非同期的にロードします。

ただし、構文がサポートされていないこと、または一方が AMD でもう一方が CommonJS であるために 2 つが競合していることを示すエラーが依然として報告されることがわかりました。

ノードを通じてES6をES5にコンパイルするため、ノードモジュールはCommonJS仕様に基づいており、そのためES5の構文もCommonJS仕様に属し、現在のブラウザとノードはES6仕様またはそのほとんどをサポートしていません。 サポートしません。

解決策

情報を調べた結果、webpack パッケージ化ツールを使用して依存関係を 1 つのファイルにマージし、HTML に導入できることがわかりました

上記は私が皆さんに役立つようにまとめたものです。これからのみんな。

関連記事:

JSハッシュテーブル関数を作る

JSURLパラメータを取得してjson形式でPOST送信する手順を詳しく解説

JS EventEの概要ミッターの使用スキル

以上がEs6 で書かれたファイル インポート ソリューション (詳細な解釈)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。