Модули AngularJS + TypeScript + ES6: как связать для браузера?

Я использую Angular, TypeScript и синтаксис модуля ES6. Предположим, у меня есть модуль, определенный следующим образом:

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

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

Скомпилированный JavaScript будет:

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

Мое приложение зависит от этого модуля. Итак, в файле App.ts у меня есть следующее:

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

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

Со следующим скомпилированным JavaScript:

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

Итак, теперь я пытаюсь связать это для браузера. В настоящее время я пытаюсь использовать Browserify, но я готов использовать любой доступный инструмент для связывания. Browserify дает мне ошибку, например:

Не удается найти модуль «modules/SubModule» из «C:\the\path\to\my\app»

Итак, как мне заставить Browserify работать? Или есть другой инструмент, который будет работать лучше? Я нашел эту проблему на Github, которая, кажется, говорит о том, что экспорт по умолчанию из TypeScript несовместим с CommonJS. Итак, что мне делать?

EDIT Итак, я думаю, что нашел проблему. Browserify требует, чтобы локальные пути начинались с ./. Так, например, мне нужно будет сослаться на мой подмодуль следующим образом:

import SubModule from './modules/SubModule';

Кто-нибудь знает о плагине Browserify, который будет автоматически искать относительный путь, даже если я не укажу ./? Мое приложение довольно большое, и я не хочу проходить и изменять все операторы импорта.

Или, с другой стороны, есть ли опция компилятора TypeScript для выдачи './modules/SubModule' вместо 'modules/SubModule'?


typescript javascript angularjs browserify typescript1.5
person battmanz    schedule 19.05.2015    source источник
comment
Что касается проблемы ./, вы можете посмотреть на github.com/substack/browserify-handbook#avoiding -   -  person hgoebl    schedule 29.09.2015

Ответы (4)


arrow_upward
2
arrow_downward

Вы можете использовать JSPM/Systemjs для асинхронной загрузки модулей, например:

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

и systemjs-builder для создания пакетов с помощью инструмента командной строки (jspm-cli)

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

или с задачей глотка, используя:

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

Здесь вы можете увидеть полный рабочий пример: https://github.com/b091/ts-skeleton.

person b091    schedule 12.08.2015

arrow_upward
1
arrow_downward

Если вы не укажете его, browserify будет просматривать пакеты NPM (из папки node_modules). ./ нужен, если вы хотите сказать: «Это один из моих файлов, а не модуль».

ПРИМЕЧАНИЕ:

Для проблемы большого проекта я бы сделал такой простой скрипт BASH:

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

for file in $files
do 
    sed -i 's/$from/$to/g' $file
done
person Alexis Paques    schedule 19.05.2015
comment
На данный момент я обновил все свои пути, чтобы включить ./. Однако это кажется далеким от идеала. Мне бы очень хотелось использовать синтаксис модуля ES6, как показано здесь: 2ality. com/2014/09/es6-modules-final.html. Обратите внимание, что ./ не требуется. - person battmanz; 20.05.2015
comment
Вы правы, но он должен быть скомпилирован в ES5... Может быть вариант в компиляторе 6to5! - person Alexis Paques; 20.05.2015

arrow_upward
1
arrow_downward

IMO, весь смысл Browserify заключался в том, чтобы «подтвердить» модульную структуру NodeJS/CommonJS на сервере на стороне браузера/клиента. Если вы думаете об этом таким образом, то вы не захотите менять поведение оператора import/require, сохраните «./», чтобы сохранить симметрию, поскольку она должна быть встроена в общий синтаксис require в NodeJS. Я думаю, что это просто хорошая практика кодирования.

person wayofthefuture    schedule 22.07.2015

arrow_upward
0
arrow_downward

Я создал адаптер gulp именно для этой цели. Он создает пакеты модулей из синтаксиса модуля Typescript ES6, используя расширения в файле проекта typescript tsconfig.json. Затем сборка gulp объединяет все компоненты в единый комбинированный пакет javascript. Недавно я портировал приложение Typescript-Angular todoMVC для использования синтаксиса машинописного текста ES6, который скомпилирован и построен с помощью TsProject. Он полностью задокументирован на сайте TsProject TodoMVC на сайте github. . Пожалуйста, посмотрите, соответствует ли он вашим потребностям.

person Todd Thomson    schedule 02.10.2015
comment
TsProject теперь поддерживает пакеты модулей React typescript ES6. Пример приложения находится по адресу ReactTodoMVC. - person Todd Thomson; 09.10.2015