Javascript 如何使用SystemJS导入和使用传输的Typescript库？_Javascript_Typescript_Ecmascript 6_Babeljs_Systemjs

Javascript 如何使用SystemJS导入和使用传输的Typescript库？

javascript typescript ecmascript-6

Javascript 如何使用SystemJS导入和使用传输的Typescript库？,javascript,typescript,ecmascript-6,babeljs,systemjs,Javascript,Typescript,Ecmascript 6,Babeljs,Systemjs,我已经创建了一个TypeScript库。我需要知道如何在浏览器中导入和使用此库。首先，我使用的是tsc v2.1.4；我还使用gulp的TypeScript插件来帮助开发过程。我有一个gulp任务，它将我的*.ts文件编译成*.js文件，如下所示 gulp.task('dist', function() { var tsResult = gulp.src(['src/**/*.ts']) .pipe(sourcemaps.init()) .pipe(tsc(

我已经创建了一个TypeScript库。我需要知道如何在浏览器中导入和使用此库。首先，我使用的是tsc v2.1.4；我还使用gulp的TypeScript插件来帮助开发过程。我有一个gulp任务，它将我的

*.ts

文件编译成

*.js

文件，如下所示

gulp.task('dist', function() {
  var tsResult = 
    gulp.src(['src/**/*.ts'])
      .pipe(sourcemaps.init())
      .pipe(tsc({ out: 'mylib.js', noImplicitAny: true, target: 'es6', sourceMap: true, module: 'system' }));
  return tsResult.js
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

生成的

mylib.js

文件如下所示

System.register("vehicle/car",[], function(exports_1, context_1) {
 "use strict";
 var __moduleName = context_1 && context_1.id;
 var Car;
 return {
  execute: function() {
   Car = class Car {
    constructor(make, model) {
     this.make = make;
     this.model = model;
    }
   };
   exports_1("Car", Car);
 };
});

然后，我尝试按照上的文档进行操作，并创建一个

index.html

来测试使用情况

<html>
  <head>
    <title>Test MyLib</title>
  </head>
  <body onload="start()">
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script>
      function start() {
        SystemJS.import('dist/mylib.js')
          .then(function(lib) {
            console.log(lib);
            //what do i do here? how do i use my classes/objects here?
          });
      }
    </script>
  </body>
</html>


测试MyLib
函数start（）{
SystemJS.import（'dist/mylib.js'）
.then（函数（lib）{
console.log（lib）；
//我在这里做什么？我在这里如何使用我的类/对象？
});
}

查看JavaScript控制台，我没有看到任何错误。在我注销

lib

的地方，它只是一个

对象

，包含一系列函数，我不知道如何使用这些函数来实例化库中的类/对象

我将继续阅读更多关于ES6到ES5类型脚本工作原理的文章。显然，即使我生成了一个JavaScript文件（例如，

mylib.js

），我也不能像这样简单地引用它

```
“
```

然后使用它。我必须通过

SystemJS

（这是我的新手，也是混乱的一部分）。显然，我似乎可以直接引用我的

*.ts

文件，并使用其他带有SystemJS的插件（babel）进行动态传输。上的文档已经过时了，这对我没有帮助（使用说明似乎已经过时了）

SystemJS的使用说明也有点混乱。在某些情况下，我看到了

SystemJS.config（{…}）

，在某些情况下，我看到了

System.config（{…}）

。我推测他们从

System

更改了

SystemJS

，但我真的不确定

我希望能澄清如何从TypeScript库项目一直到浏览器的使用；这里的任何在线示例或指导都非常感谢（我也在继续搜索）。

尝试用

SystemJS.import（'vehicle/car'）替换您的评论。然后（function（carModule）{var car=new carModule.car（'make'，'model'））

。另请参阅。对于您的gulp任务，您不需要在浏览器中传输任何内容，也不需要任何systemjs插件。谢谢您的帮助。在另一篇文章中，有一个关于

webpack bundle

的回复。这是一种比使用

systemjs

方法更好的方法吗？如果我引用简单的模块，没有错误r发生了，但我的一些模块引用了

lodash

。你知道如何处理这种混乱吗？你展示的代码确实有效，但它让我想起了回调地狱，这是我想要避免的事情。如果有更好的方法将typescript代码发送到浏览器中（没有嵌套调用，或者就像一行导入一样简单，与脚本标记没有什么不同），我更喜欢这种方式。没有回调，浏览器中的模块是无法使用的（实际上是承诺），至少直到本机支持。我认为组织应用程序的最佳方法是将所有内容都放在模块中，并在浏览器中有一行调用初始化/启动功能。不知道

lodash

，但您可以尝试

SystemJS.config（{map:{'lodash'：'node_modules/lodash'，packages:{'lodash'：{main:'index.js}}})

如中所示。@artem这些都是公认的答案。请发布一个答案，我将接受。不过，根据您提供的参考，这个问题似乎是重复的。