Moduły AngularJS + TypeScript + ES6: jak grupować w przeglądarce?

Question

Używam składni kodu Angular, TypeScript i ES6. Załóżmy, że mam moduł zdefiniowany następująco:

// SubModule.ts 
import MyService from 'services/MyService'; 

export default angular.module('subModule', []) 
    .service('myService', MyService); 

Skompilowany JavaScript byłoby:

var MyService_1 = require('services/MyService'); 
exports.default = angular.module('subModule', []) 
    .service('myService', MyService_1.default); 

Moja aplikacja zależy od tego modułu. Więc mam następujące w pliku App.ts:

// App.ts 
import SubModule from 'modules/SubModule'; 

angular.module('app', [SubModule.name]); 

z następującymi skompilowanego kodu JavaScript:

var SubModule_1 = require('modules/SubModule'); 
angular.module('app', [SubModule_1.default.name]); 

Więc teraz próbuję to pakiet dla przeglądarki. Obecnie próbuję używać przeglądarki Browserify, ale chcę użyć dowolnego narzędzia do łączenia. Browserify daje mi błąd takich jak:

Nie można odnaleźć modułu 'modules/modułem' z 'C: \ katalogu \ ścieżka \ do \ My \ app'

Więc jak mam zrobić pracę Browserify ? Czy istnieje inne narzędzie, które będzie działało lepiej? Znalazłem ten problem na Github, który wydaje się mówić, że default exports from TypeScript aren't interoperable with CommonJS. Więc co mam zrobić?

---

EDIT Więc myślę, że znalazłem problem. Browserowanie wymaga, aby ścieżki lokalne zaczynały się od ./. Tak więc, na przykład, że muszę odwołać mój submoduł następująco:

import SubModule from './modules/SubModule'; 

Czy ktoś wie o wtyczce Browserify który automatycznie wyszuka ścieżkę względną nawet jeśli nie podasz ./? Moja aplikacja jest dość duża i nie chcę jej przeglądać i modyfikować wszystkich instrukcji importowania.

Z drugiej strony, czy istnieje opcja kompilatora języka TypeScript do emisji './modules/SubModule' dla 'modules/SubModule'?

Answer 1

Jeśli go nie określisz, przeglądarka zajrzy do pakietów NPM (od node_modules forlder). ./ jest potrzebny, jeśli chcesz powiedzieć "Jest to jeden z moich plików, a nie moduł".

UWAGA:

Dla problemu dużego projektu, chciałbym zrobić prosty skrypt BASH tak:

files=`find . -type f` 
from="from 'modules/" 
to="from './modules/" 

for file in $files 
do 
    sed -i 's/$from/$to/g' $file 
done 

Answer 2

IMO, cały sens Browserify było "IFY" z NodeJS/Struktura modułowa CommonJS na serwerze, do przeglądarki/klienta. Jeśli myślisz o tym w ten sposób, nie chcesz zmieniać zachowania instrukcji import/require, zachowaj "./", więc zachowujesz symetrię, ponieważ powinna być zgodna ze wspólną składnią wymaganą w NodeJS. Myślę, że to po prostu dobra praktyka kodowania.

Answer 3

Można użyć JSPM/Systemjs załadować moduły asynchronicznie jak:

System.import('./packageName/ModuleName') 

i systemjs budowniczego do tworzenia wiązek z narzędzia wiersza poleceń (jspm-CLI)

jspm bundle ./packageName/ModuleName dist/app.js 

lub zadania haustem wykorzystaniem :

var Builder = require('jspm').Builder; 
var builder = new Builder(); 
builder.loadConfig('jspm.conf.js') 
    .then(function() { 
     var buildConfig = { 
      sfxFormat: 'amd', 
      minify: true, 
      sourceMaps: true 
     }; 
     return builder.buildSFX('./packageName/ModuleName', outFile, buildConfig); 
    }); 

Tutaj można zobaczyć pełny przykład pracy: https://github.com/b091/ts-skeleton

Answer 4

W tym celu stworzyłem adapter do wąchania. Buduje pakiety modułów ze składni modułu Typescript ES6 za pomocą rozszerzeń w pliku projektu maszynopisu tsconfig.json. Konstrukcja gulp następnie łączy wszystkie komponenty w jeden połączony pakiet javascript. Niedawno przeportowałem aplikację todoMVC Typescript-Angular, aby używać składni maszynowej ES6, która jest kompilowana i budowana za pomocą TsProject. Jest w pełni udokumentowany na stronie github TsProject TodoMVC. Sprawdź, czy spełnia twoje potrzeby.