使用 typescript 2 路径别名汇总 Angular 2

Question

我正在尝试汇总 Angular 2 应用程序，但我有：

无法从 xxxx\wwwroot\angular\app\app.module.js 解析“app/components/xxx/xxxxx.component”

xxxxx.componentapp.module 有这样的引用：

import { xxxxx } from 'app/components/xxx/xxxxx.component'

所以 tsconfig.js 有：

"compilerOptions": {
  ...
  "paths": {
    "app/*": [ "./app/*" ],
    ...
  },
  "outDir": "wwwroot", 
  ...
},

如何解析汇总中的打字稿等路径别名？

我尝试过

1）https://github.com/frostney/rollup-plugin-alias

rollup-config.js：

export default {
  entry: 'wwwroot/angular/app/main-aot.js',
  dest: 'wwwroot/dist/build.js',
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      alias({
            'app': '.' // asuming "wwwroot/angular/app/" is the working dir
      }),
      uglify()
  ]
}

2）https://github.com/dot-build/rollup-plugin-includepaths

rollup-config.js：

let includePathOptions = {
    include: {},
    paths: ['../'], // asuming "wwwroot/angular/app/" is the working dir
    external: [],
    extensions: ['.js']
};

export default {
  entry: 'wwwroot/angular/app/main-aot.js',
  dest: 'wwwroot/dist/build.js',
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      includePaths(includePathOptions),
      uglify()
  ]
}

但这些都不起作用。任何想法？提前致谢！！！

Answer 1

您是否尝试过使用 typescript 插件进行汇总？

https://github.com/rollup/rollup-plugin-typescript

安装与npm install --save-dev rollup-plugin-typescript

导入你的 rollup-config.jsimport typescript from 'rollup-plugin-typescript';

并确保将其添加到插件部分，例如

plugins: [ typescript() ]

根据您的项目设置，您可能需要更改依赖项以使用本地打字稿安装，例如

    plugins: [
    typescript({
            typescript: require('typescript')
        })
]