web-dev-qa-db-ja.com

ES6インポートの使用方法(クライアント側JS)

私はVeeValidateを使用しようとしています、そして例はこのようにES6インポートの使用法を示しています:

import { Validator } from 'vee-validate';

私の理解では、これはnpmでのみ機能し、CDNでは機能しないということです。クライアント側のjsを記述し、ノードのjsを使用したくない。 browserifyやwebpackなどを調べる必要がありますか?

CDNリンクからJavaScriptをコピーして、インポート用のローカルjsファイルにしようとしましたが、機能しませんでした。輸出に関する声明がなかったため、うまくいきませんでしたか?

8
rrebase

現在、インポート/エクスポート構文は すべてのユーザーのブラウザーの80%未満(caniuse.com) でサポートされています。

これを使用してスクリプトを「含める」ことができますが、最初にput type="module"の属性として<script tag>(例<script type="module">

次に、モジュールでimport/exportを実行できます。そして、[〜#〜]はい[〜#〜]モジュールは、値(変数、関数...)をエクスポートして使用できるようにする必要があります別のスクリプトで、しかし何かをエクスポートする必要なしにスクリプトを実行できるので、これはオプションです。

ドキュメンテーション:

これはまだサポートされていない機能であり、ブラウザの互換性を気にする場合はポリフィルが必要になることに注意してください。

7
538ROMEO

あなたが言った問題は、インポートは現在、ノードを介してグローバルにのみサポートされているということです。クライアント側でコードをすばやくインポートする必要があり、jQueryがオプションである場合は、以下を使用できます。

$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
    console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

これにより、サーバーからJavaScriptコードが読み込まれて実行されます。コールバックdoneは、スクリプトのダウンロードが完了したときに呼び出されますが、実行が完了したとは限りません。

詳細については、 公式リファレンス を参照してください。

0
Chris - Jr

これを試して :

const url = './demo.js';
try { import(url).loadPageInto(main);} 
catch (error) { main.textContent = error.message; }
0
Chau Phu Cuong