Отдельные пакеты поставщиков и приложений с angular2 и браузером - ошибка импорта

Я работаю над приложением angular2, которое хочу создать с помощью gulp и browserify.
Используя tsify Мне удалось вывести автономный bundle.js великолепного размера 1,4 МБ после минимизации.

Я хотел бы иметь два отдельных файла пакета: один для зависимостей поставщика и один для моего приложения.

В основном я надеялся добиться этого:

  <!-- My dream index.html script tags -->
  <script src="bundle_vendors.js"></script>
  <script src="bundle_app.js"></script>

Вот что я пробовал в командной строке:

  1. Я сгенерировал первый пакет:

    browserify app/vendor.ts -p [tsify ] > bundle_vendors.js
    

Мой файл vendor.ts — это просто список импорта:

import 'zone.js'
import 'reflect-metadata'
import '@angular/core'
import '@angular/http'
import '@angular/router'
import '@angular/common'
import '@angular/platform-browser'
import '@angular/platform-browser-dynamic'
import 'rxjs/Rx'
  1. Затем я создал свой второй пакет:

    browserify -x @angular/core -x @angular/common -x @angular/http -x @angular/router -x rxjs/Rx -x @angular/platform-browser -x zone.js -x reflect-metadata -x @angular/platform-browser-dynamic app/main.ts -p [tsify ] > bundle_app.js
    

Мой файл tsconfig.json выглядит так (живет в текущем каталоге):

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["es6", "dom"],  
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  },
  "compileOnSave": false,
  "exclude": [
  ]
}

Хорошая часть: второй пакет содержит только мое приложение и намного меньше!
Не очень хорошая часть: он не работает. Я браузер, я получаю Uncaught Error: Cannot find module '@angular/core'.

На вопросы:

  • Есть ли что-то очевидное, что я упускаю?
  • Как я могу увидеть модули, доступные для require, после того, как я загрузил bundle_vendors.js? Я ищу список модулей, которые «экспортируются», чтобы другие пакеты могли их импортировать.

Я понятия не имею, с чего начать отладку этого.

Из того, что я прочитал, альтернативой было бы использование angular-cli (который использует webpack), но проект, над которым я работаю, уже использует gulp, поэтому я хотел бы заставить его работать. К тому же я вроде как уже занят.

Любая помощь приветствуется!


person ldirer    schedule 07.12.2016    source источник
comment
Вы определенно хотите использовать angular-cli. Angular-cli автоматически создаст для вас ваши пакеты. Он также будет встряхивать дерево, минимизировать и выполнять множество других оптимизаций для вас. Нет необходимости в глотке. Серьезно, я обещаю вам, вам нужен angular-cli.   -  person Anthony Gatlin    schedule 17.12.2016
comment
Я получил что-то, работающее с gulp & browserify для части комплектации (хотя пакеты ОГРОМНЫ), но затем часть watchify была вялой... Ужасный опыт разработки. Я уверен, что это можно решить со временем / дополнительными навыками, но, как вы упомянули, это не то, где я хочу быть;).   -  person ldirer    schedule 17.12.2016


Ответы (1)


Есть две проблемы:

  1. Вы не использовали параметр -r для модулей, которые хотите получить от bundle_vendors.js .
  2. В tsify есть ошибка, которая ломает опцию -r Browserify.

Я исправил вторую проблему, и новая версия tsify (3.0.0) была опубликована в NPM.

Чтобы исправить первое, вы должны изменить команду, используемую для сборки bundle_vendors.js, на:

browserify -r @angular/core -r @angular/common -r @angular/http -r @angular/router -r rxjs/Rx -r @angular/platform-browser -r zone.js -r reflect-metadata -r @angular/platform-browser-dynamic app/vendor.ts -p [tsify] > bundle_vendors.js

Кроме того, вы можете рассмотреть возможность добавления skipLibCheck вариант компилятора для вашего tsconfig.json:

TypeScript 2.0 добавляет новую опцию компилятора --skipLibCheck, которая заставляет пропускать проверку типов файлов объявлений (файлов с расширением .d.ts). Когда программа включает в себя большие файлы объявлений, компилятор тратит много времени на проверку типов объявлений, о которых уже известно, что они не содержат ошибок, и время компиляции может быть значительно сокращено за счет пропуска проверок типов файлов объявлений.

person cartant    schedule 16.12.2016
comment
Спасибо, 1. определенно был основной проблемой. Я ожидал, что браузер будет экспортировать модули из bundle_vendors.js. Не уверен, почему теперь, когда я думаю об этом, только в следующей команде я говорю браузеру, что хочу их использовать (с -x). На самом деле я пытался использовать -r после того, как написал свой вопрос, и я почти уверен, что он работает с той же командой, которую вы написали, без tsify для первого шага. Я предполагаю, что browserify смог выяснить, где находятся соответствующие файлы javascript, поэтому ему не понадобился машинописный текст. - person ldirer; 17.12.2016