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

Question

我有一个用 TypeScript 编写的 Node.js & AngularJS 应用程序，我在其中尝试使用 System.js.

加载模块

如果我只导入一个 class 来指定类型，它就可以正常工作。例如：

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

但是，当我尝试使用导入的 class 实例化变量时，我在运行时遇到异常。例如：

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（这是您应该创建的新文件，它将 bootstrap 您的应用程序）文件是transpiled an 位于与 index.html 相同的目录中（index.html 应包含用于配置 systemjs 的脚本，如上所述）

3) 在 bootstrap.ts:

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

3) Bootstrap 您的应用程序只需调用 System.import:

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

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

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

Loading modules in TypeScript using System.js

typescript

systemjs