2016-09-22 3 views
0

Я бы хотел создать JS Lib использованием RxJs (5.0.0-Beta.6) и машинопись (1.8.10).RxJs с TypeScript: как сгенерировать производственные файлы для Интернета?

Мой простой файл TypeScript компилируется. У меня есть эти файлы:

MyLib.ts:

/// <reference path="../../typings/globals/es6-shim/index.d.ts" /> 
import * as Rx from 'rxjs/Rx'; 
Rx.Observable.of('foo', 'bar'); 

tsconfig.json:

{ 
    "compilerOptions": { 
     "module": "commonjs" 
     ,"target": "es5" 
     ,"sourceMap": true 
    }, 
    "files": [ 
     "src/MyLib.ts" 
    ] 
} 

I'm с помощью Глоток-машинописный для создания JS файла и его сгенерируйте этот файл:

MyLib.js:

"use strict"; 
var Rx=require("rxjs/Rx"); 
Rx.Observable.of("foo","bar"); 

Теперь мне нужно, чтобы этот файл в HTML. RxJs нуждается в зависимости, поэтому я скопировал эти из них:

  • RxJs 5.0.0 Beta 6 >> node_modules/rxjs/пучки/Rx.min.js

  • SystemJS 0.19.38 >> node_modules/systemjs /dist/system.js

  • requireJS 2.3.2 >> node_modules/requirejs/require.js

Это мой HTML:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 

 
    <meta charset="UTF-8"> 
 
    <title>MyLib Test</title> 
 

 
    <script src="vendor/require.js"></script> 
 
    <script src="vendor/system.js"></script> 
 
    <script src="vendor/Rx.min.js"></script> 
 
    <script src="MyLib.js"></script> 
 

 
</head> 
 
<body> 
 

 
</body> 
 
</html>

Моя проблема:

I'm получаю эту ошибку в Chrome консоли:

Uncaught Ошибка: Имя модуля "rxjs/Rx" не было загружен еще для контекста: _. Использование требуют ([])

Я не был в состоянии загрузить этот простой JS: MyLib.js сделанные с RxJs и машинопись.

Какова моя проблема и как ее исправить?

ответ

1

Вы забыли настроить загрузчик модуля (и по какой-то причине включили два из них (require и systemjs)).

Вы должны оставить только один и ваш HTML с systemjs будет выглядеть несколько похож на:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>MyLib Test</title> 
    <script src="vendor/system.js"></script> 
    <script> 
     System.config({ 
      paths: { 
       "rxjs": 'vendor/rx/dist/rx.min' 
      }  
     }); 

     System.defaultJSExtensions = true; 

     //This will bootstrap your app 
     System.import('myLib').catch(function(e) 
     { 
      console.error(e); 
     });; 
    </script> 
</head> 
<body> 

</body> 
</html> 

Надеется, что это помогает.

Смежные вопросы