Question

我在TypeScript中有2个文件（我将在稍后创建几个文件），并且我想生成一个其他将用作库的独特JS文件。

此时，通过最简单的练习连接两个文件并使用SystemJS将它们加载到HTML文件中，我收到此错误：

Error: (SystemJS) Multiple anonymous defines in module

我使用的是TypeScript v1.8和SystemJS v0.19.38。我有这两个文件：

Utils.ts

export const ValidatorRegExpEmail   = /^([_A-Za-z0-9-+]+(\.[_A-Za-z0-9-]+)*)+@([A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,}))$/;   // Christian

export class Validator {
    static isEmail ( s: string ) {
        return ValidatorRegExpEmail.test ( s.trim () );
    }
}

Main.ts

import { Validator } from "./Utils";
console.log ( Validator.isEmail ( "email@server.com" ) ) ;

tsconfig.json

{
"compilerOptions": {
     "module": "amd"
    ,"target": "es5"
    ,"sourceMap": true
},
"files": [
     "src/Utils.ts"
    ,"src/Main.ts"
]
}

我使用gulp-typescript编译并生成一个唯一的JS文件。并生成此文件：

Main.js

define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.ValidatorRegExpEmail = /^([_A-Za-z0-9-+]+(\.[_A-Za-z0-9-]+)*)+@([A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,}))$/; // Christian
    var Validator = (function () {
        function Validator() {
        }
        Validator.isEmail = function (s) {
            return exports.ValidatorRegExpEmail.test(s.trim());
        };
        return Validator;
    }());
    exports.Validator = Validator;
});

define(["require", "exports", "./Utils"], function (require, exports, Utils_1) {
    "use strict";
    console.log(Utils_1.Validator.isEmail("ghporras@gmail.com"));
});

最后，在我的HTML中，我有这个加载：

<head>    
<script src="MyLibv1.0/vendor/system.js"></script>
 <script>
    System.config({
         baseURL: "MyLibv1.0/"
    });
    System.defaultJSExtensions = true;
    System.import("Main").catch(function(e)
    {
        console.error(e);
    });
</script>
...

在Chrome中加载此html我收到此错误：

Error: (SystemJS) Multiple anonymous defines in module

如果我从

更改tsconfig.json

“module”：“amd”

为：

“module”：“system”

然后在Chrome中我收到此错误：

Error: (SystemJS) Multiple anonymous System.register
If loading a bundle, ensure all the System.register calls are named.

为什么呢？我做错了什么？

Answer 1

您应该使用SystemJS Builder。创建捆绑包作为构建管道的一部分，然后只需在浏览器中加载捆绑包。

var path = require("path");
var Builder = require('systemjs-builder');

// optional constructor options 
// sets the baseURL and loads the configuration file 
var builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js');

builder
.bundle('local/module.js', 'outfile.js')
.then(function() {
  console.log('Build complete');
})
.catch(function(err) {
  console.log('Build error');
  console.log(err);
});

https://github.com/systemjs/builder

如何编译bundle中的一些Typescript文件并使用SystemJS加载它？

Utils.ts

Main.ts

tsconfig.json

Main.js

1 个答案: