Les fonctions d'importation à partir d'un autre fichier js. Javascript

J'ai une question sur le fait d'inclure un fichier javascript.
J'ai un exemple très simple: 

--> index.html
--> models
      --> course.js
      --> student.js

course.js:

function Course() {
    this.id = '';
    this.name = '';
}

Un étudiant à un cours de propriété. comme ceci:

import './course';

function Student() {
    this.firstName = '';
    this.lastName = '';
    this.course = new Course();
}

et la index.html c'est comme: 

<html>
    <head>
        <script src="./models/student.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="myDiv">
        </div>
        <script>
        window.onload= function() {
            var x = new Student();
            x.course.id = 1;
            document.getElementById('myDiv').innerHTML = x.course.id;
        }
        </script>
    </body>
</html>

Mais j'obtiens une erreur sur la ligne "var x = new Etudiant();":

Étudiant n'est pas défini

Quand j'enlève les importer à partir d'Étudiant, je ne reçois pas d'erreur de plus.
J'ai essayé de l'utiliser (au besoin, d'importer, de comprendre, de créer une fonction personnalisée, à l'exportation) et aucun n'a fonctionné pour moi.

Quelqu'un sait pourquoi? et comment le corriger?

P. S. le chemin d'accès est correct, il s'agit de la saisie semi-automatique dans VS Code

  • Peut-je faire un lien vers les docs pour le moment: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
  • Je ne pense pas qu'il a un problème avec les importations, il a un problème avec l'environnement qu'il essaie de l'exécuter dans. Les navigateurs ne gèrent pas l'importation par défaut.
  • Avez-vous regarder dans le navigateur de l'F12 outils de dev de la fenêtre?
  • Les navigateurs ne les supporte pas et pourtant. Peut-être dans l'avenir. Suivez ce lien pour plus d'info oreilly.com/learning/...
  • himm, je vais étudier ça.
  • Aussi ceci: jakearchibald.com/2017/es-modules-in-browsers
  • J'ai essayé ces solutions, et aucun d'eux n'a fonctionné pour moi!
  • Avez-vous manqué ma réponse? Ma solution fonctionne sur Firefox, même dans le file:/// de l'environnement.
  • Cet article est périmé. Vous pouvez maintenant utiliser ES6 modules dans les navigateurs, il suffit juste d'utiliser le "module" de type.
  • Les gars, vous ne voyez pas la réponse que je leur ai fournis? Il est entièrement testé, code de travail.

InformationsquelleAutor Samy Sammour | 2018-01-11
  1. 17

    La suivante fonctionne pour moi sous Firefox et Chrome. Dans Firefox, il fonctionne même à partir de file:///

    models/course.js

    export function Course() {
    this.id = '';
    this.name = '';
};

    models/student.js

    import { Course } from './course.js';

export function Student() {
    this.firstName = '';
    this.lastName = '';
    this.course = new Course();
};

    index.html

    <div id="myDiv">
</div>
<script type="module">
    import { Student } from './models/student.js';

    window.onload = function () {
        var x = new Student();
        x.course.id = 1;
        document.getElementById('myDiv').innerHTML = x.course.id;
    }
</script>
    • n'a pas fonctionné malheureusement, traversées: l'Accès à l'Script à 'file:///........./models/student.js' d'origine 'null', a été bloqué par la SCRO politique: réponse non Valide. Origine 'null' est donc pas autorisé à accéder.
    • C'est ce que je reçois dans google Chrome, il ne fonctionne pas dans Firefox si. N'a pas d'importance; en production, vous serez servir les fichiers de toute façon (ce qui fait que l'erreur disparaît). C'est la façon de mettre en œuvre l'état actuel du module de support pour les navigateurs, c'est donc la réponse à votre question, si elle fonctionne pour vous ou pas 😉
    • Il ne fonctionne pas sur Firefox ainsi. Il traversées d'une exception "L'encodage de caractères du document HTML n'a pas été déclarée. Le document sera rendu avec texte tronqué dans certaines configurations de navigateur si le document contient des caractères de l'extérieur de la plage US-ASCII. L'encodage des caractères de la page doit être déclarée dans le document ou dans le protocole de transfert." et pas de sortie sur l'écran
    • Si vous voyez un 1, il a travaillé. L'exception n'est pas liée et causé par votre ne pas avoir <meta charset="utf-8"> dans votre <head>.
    • J'ai mentionné qu'il n'y avait pas de Sortie, l'écran est vide. Pourquoi javascript doit être si compliqué
    • Parce que le support de module est expérimental. J'ai mis mon exemple en ligne: khrismuc.github.io le code Source ici: github.com/khrismuc/khrismuc.github.io cela fonctionne pour vous?
    • Toujours rien, Aucun navigateur n'a montré une valeur. Bord, Firefox, Chrome, IE. Toujours page vide
    • Dans Firefox, vous devez activer dom.moduleScripts.enabled dans about:config, comme il est dit dans l'article. Dans google Chrome, il fonctionne hors de la boîte. Les tests Bord droit maintenant. ... Hé oui, fonctionne très bien à Bord. Juste pour être clair, c'est une page blanche avec un petit 1 dans le coin supérieur gauche.
    • Fait, que j'ai hébergé sur le serveur IIS local et ça fonctionne! Merci P. S: aussi en chrome
    • Ooh, j'ai vérifié sur d'autres navigateurs. Apparemment, il a travaillé uniquement sur chrome
    • Oui, comme je l'ai dit, c'est une technique expérimentale dès maintenant et ne pas largement soutenue. Il fonctionne pour moi à Bord, et dans Firefox après l'activation de l'option si. Voir mon commentaire ci-dessus.
    • Il est possible d'améliorer la conception du projet, y compris models_inlcude.js dans models dossier. Le fichier des importations de tous les modèles nécessaires et en fichier HTML seulement ajouter de la <script type="module" language="javascript" src="models/models_inlcude.js"></script> dans <head> tag. À l'aide de cette façon, vous éviter d'ajouter de code de script dans votre code HTML
    • S'il vous plaît essayez d'utiliser un serveur pour cela, vous n'obtiendrez pas de la SCRO erreur

    InformationsquelleAutor Chris G
  2. 4

    Par défaut, les scripts ne peuvent pas gérer les importations comme ça directement. Vous avez probablement une autre erreur de ne pas pouvoir en obtenir bien Sûr ou non de procéder à l'importation.

    Si vous ajoutez type="module" à votre <script> tag, et de modifier l'importation de ./course.js (car les navigateurs ne sera pas auto-ajouter le .js partie), puis le navigateur va tirer vers le bas pour vous, et il va probablement travailler.

    import './course.js';

function Student() {
    this.firstName = '';
    this.lastName = '';
    this.course = new Course();
}
    <html>
    <head>
        <script src="./models/student.js" type="module"></script>
    </head>
    <body>
        <div id="myDiv">
        </div>
        <script>
        window.onload= function() {
            var x = new Student();
            x.course.id = 1;
            document.getElementById('myDiv').innerHTML = x.course.id;
        }
        </script>
    </body>
</html>

    Si vous servez des fichiers de plus de file://, il ne sera probablement pas travailler. Certaines IDEs ont une façon de faire un rapide sever.

    Vous pouvez également écrire un petit express serveur de servir vos fichiers (Nœud installer si vous ne l'avez pas):

    //package.json
{
  "scripts": { "start": "node server" },
  "dependencies": { "express": "latest" }
}

//server/index.js
const express = require('express');
const app = express();

app.use('/', express.static('PATH_TO_YOUR_FILES_HERE');
app.listen(8000);

    Avec ces deux fichiers, d'exécuter npm install, puis npm start et vous aurez un serveur exécutant sur http://localhost:8000 qui devrait pointer vers vos fichiers.

    • Malheureusement, cela n'a pas fonctionné et maintenant, il jette un supplément d'exception. "Réponse non valide. Origine 'null' est donc pas autorisé à accéder."
    • Si vous voyez cela, c'est un cross-origin exception. Êtes-vous l'exécutez à partir de la file:// protocole ou http://? Si vous l'exécutez à partir de file://, vous allez avoir un moment difficile.
    • file:// . Que faire alors? comment résoudre ce problème?
    • Le meilleur moyen est d'utiliser une sorte de serveur pour les servir plus de localhost. Quelques IDEs de les avoir intégrés. Vous pouvez également écrire un petit express serveur en quelques lignes. Je vais vous donner un exemple, dans ma réponse.
    • Je ne peux pas utiliser n'importe quel serveur.
    InformationsquelleAutor samanime
  3. 4

    Vous pouvez essayer comme suit:

    //------ js/functions.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ js/main.js ------
import { square, diag } from './functions.js';
console.log(square(11)); //121
console.log(diag(4, 3)); //5

    Vous pouvez également importer complètement:

    //------ js/main.js ------
import * as lib from './functions.js';
console.log(lib.square(11)); //121
console.log(lib.diag(4, 3)); //5

    Normalement, nous utilisons des ./fileName.js pour l'importation propre js file/module et fileName.js est utilisée pour l'importation de package/library module

    Lorsque vous comprendra l'main.js fichier de votre page web, vous devez définir le type="module" attribut comme suit:

    <script type="module" src="js/main.js"></script>

    Pour plus de détails, veuillez consulter ES6 modules

    InformationsquelleAutor Bablu Ahmed
  4. 0
    //In module.js add below code

export function multiply() {
    return 2 * 3;
}

    //Consommer le module dans calc.js

    import { multiply } from './modules.js';

const result = multiply();

console.log(`Result: ${result}`);

    //Module.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Module</title>
</head>
<body>

  <script type="module" src="./calc.js"></script>
</body>
</html>

    Ses un modèle de conception même code peut être trouvé ci-dessous, veuillez utiliser un serveur pour le tester autre chose que vous obtiendrez de la SCRO erreur

    https://github.com/rohan12patil/JSDesignPatterns/tree/master/Structural%20Patterns/module

    InformationsquelleAutor Rohan Patil
  5. -5

    À partir d'un rapide coup d'œil sur MDN je pense que vous pourriez avoir besoin d'inclure la .js à la fin de votre nom de fichier afin de l'importation lire
    import './course.js' au lieu de import './course'

    Réf.:
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

    • À partir d'un rapide coup d'œil à votre réponse, je vois que vous avez tort. Merci de ne pas poster des réponses sans faire de la diligence voulue.
    InformationsquelleAutor Cristian Thompson