Перенос загрузчика модулей Angular 2 с SystemJS на Webapack

Я разрабатываю приложение AngularJS, в настоящее время я использую SystemJS для загрузки модуля. О том, что есть Webpack, я узнал только через некоторое время, когда начал работать над проектом. А еще я хотел понять, что такое загрузка модуля, у меня проект в виде следующего дерева:

-client
    -app
       -components
       -models
       -modules
       *app.--.ts (app level ts files) eg. app.module.ts
    -bower_components
    -node_modules(client side packages)
    -js,styles,images (assets directories, same level in tree)
    -typings
    -index.html
    -package.json
    -systemjs.conf.js
    -tssonfig.json
    -typings.json
-server
-node_modules(server side packages)
-packages.json
-server.js
-.bowerrc

Теперь, когда я вижу, что Google перешел на Webpack, я также хотел бы использовать Webpack. Я знаю об Angular CLI, я попробовал его, и у меня все получилось.

Итак, мне нужно создать новый проект CLI, а затем перенести мои файлы в этот проект?

Если я это сделаю, какие файлы конфигурации мне нужно специально посмотреть, что повлияет на работу моего приложения с Webpack?

И если я буду продолжать использовать systemJS, будет ли этот инструмент делать большинство вещей, которые делает Webpack?

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

Допустим, я хочу использовать только Webpack без CLI, мне нужен только файл webpack.config.js и удалить файл systemjs.config.js и удалить следующее в index.html

<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

И поскольку в настоящее время у меня есть сторонние библиотеки, которые я использую с systemjs, например

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js',
  'ng2-page-scroll/ng2-page-scroll': 'npm:ng2-page-scroll/bundles/ng2-page-scroll.umd.js'

Будет ли мне легко включить их в Webpack, касаются ли они использования сторонних библиотек на официальном сайте Webpack?

Спасибо.


webpack angularjs es6-module-loader systemjs
person teebo    schedule 27.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот несколько ответов, которые могут помочь...

So do I have to create a new CLI project and then migrate my files to that project?

Использование Webpack и angular-cli одновременно и похожи, и различны. CLI использует Webpack для загрузки всех модулей, которые вы используете при разработке приложения, а затем упаковывает их вместе для производственного использования. CLI также упрощает использование компиляции AOT. Вам не нужно создавать новый проект CLI, если вы не хотите использовать все функции angular-cli.

If I do that, which configuration files do I have to specificly look at that will affect the running of my application with Webpack?

Я думаю, вы имеете в виду файлы webpack.config.js, webpack.dev.js и webpack.prod.js. Что-то, что на самом деле не объяснено, заключается в том, что все три файла могут быть по сути одним файлом, они разделены, потому что имеет больше смысла, что все общие параметры конфигурации для prod/dev находятся в webpack.config.js, все конфигурации только для prod находятся в webpack.prod.js и все конфигурации только для разработчиков находятся в webpack.dev.js.

Эти файлы эквивалентны файлу systemjs systemjs.config.js или тому, как вы его назвали.

And if I would continue using systemJS, is it a tool that does most of the things done by Webpack?

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

Мои последние мысли

Я рекомендую angular-cli/webpack только потому, что он делает процесс разработки намного проще и немного быстрее. Если вам еще предстоит продвинуться в своем проекте, то переход на angular-cli должен быть очень простым и, безусловно, того стоит. Если вы довольно далеко (мой проект охватывает более 6 месяцев разработки, и я, наконец, конвертирую его в веб-пакет), то вам не помешает перейти на веб-пакет, если вы чувствуете себя комфортно, выполняя миграцию.

На самом деле, если вам удобно использовать SystemJS, просто придерживайтесь его, если вы не хотите сделать свои процессы более эффективными. При этом я бы рекомендовал изучить system-builder, чтобы минимизировать ваш проект.

person BuddhistBeast    schedule 05.04.2017