Отчасти новичок во всей этой 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 справляется с этим, прежде чем принимать решения об использовании дополнительных библиотек.