Rollup Angular 2 with typescript 2 path别名

Question

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

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

app.module引用了xxxxx.component如下所示：

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

所以tsconfig.js有：

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

如何解决路径别名，如汇总中的打字稿？

我试过了

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

汇总-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

汇总-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

我在ASP.NET MVC环境中使用Angular 4，并在我的tsconfig.json文件中使用“paths”时遇到了同样的问题。

我还尝试使用rollup-plugin-alias ， rollup-plugin-paths和rollup-plugin-typescript 。 这些都没有奏效。 但是，我发现rollup-plugin-import-alias对我有用。

我的AOT tsconfig.json文件：

{
    "compilerOptions": {
        // ...
        "baseUrl": "./",
        "paths": {
            "myCommon/*": ["./tmp/myCommonFolder/*"]
        }
        // ...
    }
}

我的rollup-config.js文件：

import nodeResolve      from 'rollup-plugin-node-resolve';
import commonjs         from 'rollup-plugin-commonjs';
import importAlias      from 'rollup-plugin-import-alias';

export default {
    // ...
    plugins: [
        nodeResolve({jsnext: true, module: true})
        , commonjs({
            include: 'node_modules/rxjs/**'
        })
        , importAlias({
            Paths: {
                // `__dirname` is built into rollup and was needed for me to get the right path
                myCommon: __dirname + '/tmp/myCommonFolder'
            }
            , Extentions: ['js']
        })
    ]
    // ...
};

旁注：使用JIT时，我的公共文件路径可以在根目录外的其他文件夹结构中...

"paths": {
    "myCommon/*": ["./../../../Scripts/myCommonFolder/*"]
}

但是， AOT和Rollup似乎无法超越应用程序根目录。 因此，在执行AOT和Rollup构建过程的gulp任务中，我将所有内容复制到应用程序根目录下的临时文件夹中。

gulp.task('tmp:copy', function () {
    gulp.src(['Scripts/myCommonFolder/**'])
    .pipe(gulp.dest('Areas/Services/Scripts/MyAppRoot/tmp/myCommonFolder'));
});

Answer 2

你尝试过使用typescript插件进行汇总吗？

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

使用npm install --save-dev rollup-plugin-typescript

import typescript from 'rollup-plugin-typescript'; rollup-config.js import typescript from 'rollup-plugin-typescript';

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

plugins: [ typescript() ]

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

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