ホームページ >ウェブフロントエンド >jsチュートリアル >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: 複数のファイル プロジェクトが導入され、変換されます
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 サイトの他の関連記事を参照してください。