typescript - 使用 System.js 在 TypeScript 中加载模块

Question

我有一个用 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 is not defined

我使用 CommonJS。我不能使用 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 is not defined

任何帮助将不胜感激!

Answer 1

让我们尝试稍微简化一下:

1) 按如下方式配置您的 systemjs:

System.defaultJSExtensions = true;

2) 确保您的 classes.ts 和 model.ts 以及 bootstrap.ts(这是您应该创建的新文件，这将引导您的应用程序)文件被转译并位于与 index.html 相同的目录中(index.html 应包含如上所述配置 systemjs 的脚本)

3) 在 bootstrap.ts 中:

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

3) 通过单次调用 System.import 引导您的应用程序:

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

尝试这些步骤，我想你会解决你的问题。