Развертывание Angular2 Getting Started с SystemJS

Отчасти новичок во всей этой SystemJS, поэтому я мог бы полностью блестеть над важными частями в его документах. Я довольно хорошо знаком с объединением вещей с помощью Browserify, но весь этот SystemJS заставляет меня ломать голову, когда дело доходит до развертывания. Никакой каламбур, потому что в остальном я люблю SystemJS.

Учитывая следующее из файла конфигурации, имеющего ту же конфигурацию из 5-минутного быстрого запуска Angular2:

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script src="app.config.js"></script>
<script>
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

И следующее из моего Gulpfile с помощью SystemJS Builder:

gulp.task('system-builder', function (cb) {
    var builder = new Builder('./production/public/', './production/public/app.config.js');
    fs.copy('./client/node_modules', './production/public/node_modules', function(err) {
        builder.bundle('./production/public/js/app/app.boot.js', './production/public/js/app/app.js')
        .then(function() {
            console.log('Build complete');
            cb();
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
    });
});

Теперь у меня есть один файл app.js. Возвращаясь к файлу HTML, как мне использовать код приложения в связанном состоянии? Потому что я получаю ошибку angular2-polyfills.js:322 Error: SyntaxError: Unexpected identifier при следующем обновлении. Обратите внимание, что я заменил app.config.js на /js/app/app.js:

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script src="/js/app/app.js"></script>
<script>
    System.import('/js/app/app.boot').then(null, console.error.bind(console));
</script>

Я видел миллион и одно обращение только к JSPM, но я хочу знать, как SystemJS справляется с этим, прежде чем принимать решения об использовании дополнительных библиотек.


person Mitchell    schedule 21.03.2016    source источник


Ответы (1)


Ладно с этим разобрался.

По сути, вам не нужно ничего делать с файлом html, и вы можете просто оставить его как есть.

Однако мне нужно было сделать SystemJS Builder самовыполняющимся, используя build.buildStatic вместо build.bundle

Итак... следующие работы:

JS

gulp.task('system-builder', function (cb) {
    var builder = new Builder('./production/public/', './production/public/app.config.js');
    fs.copy('./client/node_modules', './production/public/node_modules', function(err) {
        builder.buildStatic('./production/public/js/app/app.boot.js', './production/public/js/app/app.js')
        .then(function() {
            console.log('Build complete');
            cb();
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
    });
});

HTML (просто оставьте как есть в режиме разработки)

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script src="app.config.js"></script>
<script>
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
person Mitchell    schedule 06.04.2016
comment
Привет @Mitchell, всего 2 вопроса по твоему коду; 1) разве вы не должны удалить импорт для app.config.js в своем HTML и вместо этого использовать app.js? 2) что касается импорта node_modules в ваш HTML, вы включили эти папки/файлы в папку развертывания? или с комплектом должно хватить? - person David; 07.07.2016
comment
Привет @david, Да, этот пост был в дни бета-тестирования, и теперь, когда он появился в RC4, некоторые вещи изменились. Поскольку в последнее время у меня не было возможности освежиться, я полагаю, что ваш первый вопрос может или не может быть применим больше. Что касается вашего второго вопроса, вы должны включить эти node_modules в свой каталог сборки, но я собирал их в один libs.js, используя gulp. - person Mitchell; 09.07.2016