使用 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));

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