使用 System.js 在 TypeScript 中加载模块 [英] Loading modules in TypeScript using System.js

问题描述

我有一个 Node.js &用 TypeScript 编写的 AngularJS 应用程序，我正在尝试使用 System.js 加载模块.

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

从./model"导入{BlogModel}var 模型:BlogModel；

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

从./model"导入{BlogModel}var 模型:BlogModel = new BlogModel();

<块引用>

未捕获的 ReferenceError: require 未定义

我使用 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><脚本>系统配置({包:{应用程序: {格式:'注册'，默认扩展:'js'}}});System.import('classes.ts').then(null, console.error.bind(console));System.import('model.ts').then(null, console.error.bind(console));

这是model.ts文件的内容:

import {User} from "./classes";从./classes"导入{Post}；导出类 BlogModel{私人_currentUser:用户；私人_posts: 帖子[];获取当前用户(){返回 this._currentUser;}设置当前用户(值:用户){this._currentUser = 值；}获取帖子(){返回 this._posts;}设置帖子(值:帖子[]){this._posts = 值；}}

这是产生异常的 JS 行:

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

<块引用>

未捕获的 ReferenceError: require 未定义

任何帮助将不胜感激！

解决方案

让我们试着简化一下:

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

System.defaultJSExtensions = true;

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

3) 在 bootstrap.ts 中:

从./model"导入{BlogModel}让模型 = new BlogModel();控制台日志(模型)；

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

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

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

I have a Node.js & AngularJS app written in TypeScript, in which I'm trying to load modules using System.js.

It works fine if I only import a class to specify a type. e.g:

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

However, when I try to instantiate a variable with an imported class, I get an exception at run-time. e.g:

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

Uncaught ReferenceError: require is not defined

I use CommonJS. I cannot use AMD because I have one project for both server side and client side. This is why I use System.js to load modules in the client.

This is my System.js definition:

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

This is the content of model.ts file:

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

And this is the JS line that produces the exception:

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

Uncaught ReferenceError: require is not defined

Any help will be profoundly appreciated!

解决方案

Lets try to simplify things a bit:

1) Configure your systemjs as following:

System.defaultJSExtensions = true;

2) Make sure that both your classes.ts and model.ts and bootstrap.ts (this is new file you should create, that will bootstrap your app) files are transpiled an located in the same directory as index.html (index.html should contain script to configure systemjs as specified above)

3) In bootstrap.ts:

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

3) Bootstrap your application with single call to System.import:

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

Try these steps and I think you will solve your problem.

这篇关于使用 System.js 在 TypeScript 中加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！