web-dev-qa-db-ja.com

別のjsファイルから関数をインポートします。 Javascript

Javascriptにファイルを含めることについて質問があります。私は非常に簡単な例を持っています：

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

course.js：

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

学生にはコースプロパティがあります。このような：

import './course';

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

index.htmlは次のようになります。

<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>

しかし、「var x = new Student（）;」という行でエラーが発生しています。

学生が定義されていません

学生からインポートを削除すると、エラーは表示されなくなります。使用しようとしましたが（必要、インポート、インクルード、カスタム関数の作成、エクスポート）、何も機能しませんでした。

誰が理由を知っていますか？そしてそれを修正する方法は？

追伸パスが正しい、それはVSコードのオートコンプリートから来ています

javascriptimport
17
Samy Sammour

以下は、FirefoxとChromeで動作します。 Firefoxでは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>
13
Chris G

デフォルトでは、スクリプトはそのようなインポートを直接処理できません。コースを取得できない、またはインポートを実行していないという別のエラーが発生している可能性があります。

type="module"を<script>タグに追加し、インポートを./course.jsに変更すると（ブラウザーは.js部分を自動的に追加しないため）、ブラウザーはあなたとそれはおそらく動作します。

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>

file://を介してファイルを提供している場合、おそらく機能しません。一部のIDEには、クイックサーバーを実行する方法があります。

クイックexpressサーバーを作成してファイルを提供することもできます（インストールしていない場合はNodeをインストールします）。

//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);

これらの2つのファイルを使用して、npm installを実行し、次にnpm startを実行すると、ファイルを指すhttp://localhost:8000を介してサーバーが実行されます。

4
samanime

次のように試すことができます：

//------ 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

完全にインポートすることもできます：

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

通常、独自の./fileName.jsのインポートにはjs file/moduleを使用し、fileName.jsモジュールのインポートにはpackage/libraryを使用します

Main.jsファイルをWebページに含める場合、次のようにtype = "module"属性を設定する必要があります。

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

詳細については、 ES6モジュール を確認してください。

4
Bablu Ahmed