この記事では、主に es6 で書かれたファイルをインポートする方法に関する関連情報を紹介します。必要な友人は参考にしてください。
この間、es6 の新しい仕様について少し学び、その後、気まぐれに、 ES6 を使用してみてください。作成したコードはブラウザで実行されます。
最初に実装手順について説明します
ES6 コードを ES5 に変換します。
html ファイルを翻訳された ES5 に変換します。
それからブラウザ環境で実行します。
ノード環境;
次に、私のディレクトリ構造の一部、大まかなプレビューを示します。
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 に導入できることがわかりました
上記は私が皆さんに役立つようにまとめたものです。これからのみんな。
関連記事:
JSURLパラメータを取得してjson形式でPOST送信する手順を詳しく解説
以上がEs6 で書かれたファイル インポート ソリューション (詳細な解釈)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。