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

亚连
リリース: 2018-05-19 14:01:41
オリジナル
2175 人が閲覧しました

この記事では、主に 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!