es6インポートエラーの問題を解決する方法

es6 インポート エラーの解決策: 1. bebal を使用して es6 を es5 に変換します; 2. webpack を介してパックし、すべての依存関係を 1 つのファイルにマージし、babel を使用して変換します。

この記事の動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 インポート エラーの問題を解決するにはどうすればよいですか?

ほとんどのブラウザは現在 ES6 をサポートしていないため、es6 を使用する場合は、bebal を使用して es6 を es5 に変換する必要があります。 .

プロジェクト ディレクトリ:

• demo1: src ファイル内の単一の js ファイル

test1.js の変換

const aa="this is test1";
console.log("this is from test1",aa);\

bebal ファイルをプロジェクトのルート ディレクトリに導入します

.babel

内容:

{
　　presets:["es2015"]
}

babel-cli

cnpm i babel-cli -g

をインストールします

es6 を es5 に変換したいので、babel-preset-es2015

cnpm i babel-preset-es2015 --save-dev

Convert test1.js

babel src --out-dir dist

(src ディレクトリの js ファイルをes5 を作成し、dist ファイルに配置します)

このページでは dist の下に test1.js が導入されており、エラーなしで実行されます

• demo2: 複数のファイル プロジェクトが導入され、変換されます

#src ファイル:

test2.js

const bb="this is bb";
export {bb}

test3.js

import {bb} from 'test2.js'
console.log(bb);

Convert babel src --out- dir dist

このページでは、dist ファイルの下に test2.js test3.js が紹介されています

エラー レポート

##ノードを介して ES6 をコンパイルするため、es5 ではノード モジュールは CommonJS 仕様に基づいており、現在のブラウザとノードは ES6 のほとんどをサポートしていません

##ソリューション

#webpack を使用してパックし、すべての依存関係を 1 つのファイルにマージし、babel を使用して変換して、HTML ファイルに導入できます。

推奨学習: 「

JavaScript 基礎チュートリアル#」

##》

以上がes6インポートエラーの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。