web-dev-qa-db-fra.com

Comment utiliser l'importation ES6 (JS côté client)

J'essaie d'utiliser VeeValidate et les exemples montrent l'utilisation de l'importation ES6 comme ceci:

import { Validator } from 'vee-validate';

Ma compréhension est que cela ne fonctionne qu'avec npm et non avec CDN. Je veux simplement écrire js côté client et ne pas utiliser de nœud js. Dois-je examiner quelque chose comme browserify ou webpack?

J'ai essayé de copier le javascript à partir du lien CDN et d'en faire un fichier js local pour l'importation, mais je n'ai pas pu le faire fonctionner. Cela n'a-t-il pas fonctionné parce que je n'avais pas de déclaration d'exportation?

es6-modulesvee-validate
8
rrebase

actuellement la syntaxe d'importation/exportation est prise en charge par moins de 80% du navigateur de tous les utilisateurs (caniuse.com) .

Vous pouvez l'utiliser pour "inclure" votre script, mais la première chose à faire est de mettre type="module" comme attribut d'un <script tag> (Par exemple. <script type="module">)

Ensuite, vous pouvez import/export dans vos modules. Et [~ # ~] oui [~ # ~] les modules doivent exporter une valeur (variable, fonction ...) pour pouvoir l'utiliser dans un autre script, mais c'est optionnel car vous pouvez simplement exécuter le script sans avoir besoin d'exporter quelque chose.

Documentation:

Gardez à l'esprit que ce n'est pas encore une fonctionnalité prise en charge et vous aurez besoin d'un polyfill si vous pensez à la compatibilité du navigateur

7
538ROMEO

Le problème, comme vous l'avez dit, est que l'importation n'est actuellement prise en charge globalement que via Node. Si vous souhaitez importer rapidement du code côté client et que jQuery est une option, vous pouvez utiliser:

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

Cela chargera et exécutera le code JavaScript à partir du serveur. Le rappel done est appelé lorsque le script a terminé le téléchargement, mais pas nécessairement l'exécution.

Pour plus d'informations, vous pouvez consulter le référence officielle

0
Chris - Jr

Essaye ça :

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