web-dev-qa-db-ja.com

System.jsを使用してTypeScriptにモジュールをロードする

TypeScriptで記述されたNode.js＆AngularJSアプリがあり、System.jsを使用してモジュールをロードしようとしています。

クラスをインポートしてタイプを指定するだけで問題なく動作します。例えば：

import {BlogModel} from  "./model"
var model: BlogModel;

ただし、インポートされたクラスを使用して変数をインスタンス化しようとすると、実行時に例外が発生します。例えば：

import {BlogModel} from  "./model"
var model: BlogModel = new BlogModel();

Uncaught ReferenceError：requireが定義されていません

CommonJSを使用しています。サーバー側とクライアント側の両方に1つのプロジェクトがあるため、AMDを使用できません。これが、System.jsを使用してクライアントにモジュールをロードする理由です。

これは私のSystem.jsの定義です：

 <script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script>
    <script src="/assets/libs/systemjs-master/dist/system.src.js"></script>

    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('classes.ts')
                .then(null, console.error.bind(console));
        System.import('model.ts')
                .then(null, console.error.bind(console));
    </script>

これはmodel.tsファイルの内容です：

import {User} from "./classes";
import {Post} from "./classes";

export class BlogModel{
    private _currentUser: User;
    private _posts: Post[];

    get currentUser(){
        return this._currentUser;
    }

    set currentUser(value: User){
        this._currentUser = value;
    }

    get posts(){
        return this._posts;
    }

    set posts(value: Post[]){
        this._posts = value;
    }
}

そして、これは例外を生成するJSラインです：

var model_1 = require("./model");

Uncaught ReferenceError：requireが定義されていません

どんな助けでも深く感謝します！

typescriptsystemjs
10
Alon

物事を少し単純化してみましょう：

1）systemjsを次のように構成します。

System.defaultJSExtensions = true;

2）両方のclasses.tsおよびmodel.tsおよびbootstrap.ts（これは作成する必要のある新しいファイルです。bootstrapアプリ）ファイルはindex.htmlと同じディレクトリにトランスパイルされます（index.htmlにはsystemjsを構成するスクリプトが含まれている必要があります）上記で指定）

3）bootstrap.ts内：

import {BlogModel} from  "./model"
let model = new BlogModel();
console.log(model);

3）Bootstrap System.importを1回呼び出すだけのアプリケーション：

System.import('bootstrap').then(null, console.error.bind(console));

これらの手順を試してみてください。問題は解決すると思います。

6
Amid