1

我正在尝试配置代码拆分

  • 角度 1.5
  • 打字稿 2.x
  • 网络包 2

基本设置：我使用 vscode typescript 编译器将 ts 文件编译到与源文件夹具有相同文件夹结构的输出文件夹。

\common
  myservice.ts
\testapp
  pageonecomp.ts
  pagetwocomp.ts
  testapp.ts

webpack 入口点是 testapp\testapp.js 其中包含

System.import('../common/myservice').then((myservice)=>{
    angular.module('testapp',['myservice'])
       .component( ... )
       .component( ... )
});

目前，pageonecomp.ts 也没有 pagetwocomp.ts 使用 myservice.ts 中的任何内容。当我编译并运行 webpack 2 时，它显示：

                  Asset     Size  Chunks             Chunk Names
      0.bundle.js  1.17 kB       0  emitted
testapp.bundle.js  8.74 kB       1  emitted  testapp

这正是我想要的，0.bundle.js 包含 MyService，testapp.bundle.js 包含 pageonecomp、pagetwocomp 和 testapp angular 模块。

但现在我想使用从 pageonecomp.ts 中的 myservice.ts 导出的 MyService 类型。为了使打字稿能够在 MyService 类上提供代码完成，我需要在 pageonecomp.ts 中导入 MyService 类型：

import {MyService} from '../common/myservice';

class PageOneComp {
  static $inject=['myservice'];
  constructor(private myservice:MyService) {}
  doSomething() { myservice.doSomething(); } // intellisense works
}

但是当我现在运行 webpack 时，代码拆分不再起作用，从输出中可以看出：

            Asset     Size  Chunks             Chunk Names
   testapp.bundle.js  7.53 kB       0  [emitted]  testapp

MyService 类现在包含在 testapp 包中，我不想要它......

有谁知道如何使它工作？目标是让 webpack 仅根据 import 语句创建我的包，以确定包中应该包含的内容，并让 System.import 指定应该在哪里进行代码拆分。

注意：目前我不需要动态加载额外的角度模块，我只是试图为多个入口点（多个小型水疗中心）制作捆绑包，以及在这些水疗中心之间共享的几个常见捆绑包。

4

0 回答 0