Empacote o aplicativo Angular 2 usando pacotes UMD (não construindo o pacote do fornecedor)

No momento, estou empacotando meu aplicativo Angular 2 com o WebPack. Ainda estamos girando ciclos rápidos; portanto, em vez de adicionar atrasos ao processo de compilação e carregamento de aplicativos, queremos incluir os pacotes configuráveis Angular 2 UMD CDN que raramente mudam, por exemplo:

<script src="https://npmcdn.com/@angular/[email protected]/bundles/core.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/common.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/compiler.umd.min.js"></script>
Quando eu deixo o WebPack fazer sua parte, o pacote funciona bem, mas tem alguns MB, porque não utiliza pacotes pré-criados nem separa o código de "fornecedor" do Angular 2.Quando eu uso oRecomendações do Angular 2 WebPack, por exemplo.:plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js") ], meu pacote de aplicativos é pequeno, mas eu construo manualmente um pacote separado de 1 MB, que contém a maior parte da estrutura do Angular 2, cada versão. Esse arquivo muda um pouco a cada compilação, dependendo do meu aplicativo, e não é portátil entre versões dos meus aplicativos ou vários aplicativos e não possui o benefício de "CDN". É claro que tenho que incluir esse arquivo para que meu aplicativo seja executado.Quando eu uso o IgnorePlugin para filtrar@angular|rxjs, por exemplo.plugins: [ new webpack.IgnorePlugin(/\@angular|rxjs/) ], exclui os arquivos do fornecedor, mas insere exceções codificadas / gera erros na parte superior do pacote de aplicativos.Quando eu usoWebPack externos, por exemplo.externals: ['@angular/core', ..., Eu recebofunction(module, exports) { module.exports = @angular/core; }, saída no meu pacote de aplicativos, o que obviamente não é funcional. A documentação do WebPack não é muito próxima, mas acho que posso especificar umlibraryTarget ou função de resolução citada, que instruiria o WebPack a compilar no carregamento do módulo.Quando abandono completamente o WebPack e uso o bundler do compilador TypeScript (conformeeste guia, que usa os pacotes UMD), receboSystem.register() chamadas referentes aos namespaces do NPM que eu esperava, por exemploSystem.register("myapp/boot", ['@angular/core', ..., mas ainda estou trabalhando na configuração do SystemJS para chamar os UMDs. Como observação lateral, esse arquivo tem um tamanho extra de 25% em relação ao que o WebPack está gerando.Se eu usar o SystemJS como no item anterior, desejo que essa compilação ocorra durante a compilação ou como um processo paralelo, e não como parte do salvamento do arquivo. eu achoSystemJS-Builder (veja perguntas relacionadasaqui eaqui) seria a maneira de fazer isso? Talvez isso também produza tamanhos de arquivo menores que o "bundler" integrado ao Typescript.

Como criar um pacote de aplicativos que não depende de um pacote Angular 2 reembalado exclusivamente?

Atualmente estou construindo contra o RC3. Atualmente, meu processo é o WebPack, como mencionado acima, mas eu mudaria para outro conjunto de ferramentas, se isso facilitar.

Fazendo mais algumas pesquisas, acho que fui enganado pela terminologia "Loader" do WebPack. Eu tenho que usar um carregador de módulos, e não parece que o WebPack tenha um que funcione para isso.

Para atribuir namespaces de módulo de pacotes configuráveis UMD (e conectar dependentes), eles não podem ser carregados em tags de script. Em vez disso, eles devem ser avaliados com um determinadothis contexto para atuar como a referência do módulo. Isso significa que, mesmo que eu queira que todos sejam carregados de forma síncrona, ainda preciso configurar algo como o SystemJS para carregá-los pela conexão, para que seu contexto seja controlado / agrupado.

esteDesentupidor angular 2 está perto do que estou procurando. Ele usa os pacotes UMD Angular 2, mas não usa um pacote RxJs, embora isso pareça fácil de mudar se eu quiser toda a biblioteca RxJs.

questionAnswers(2)

yourAnswerToTheQuestion