使用 ES6 语法和绝对路径导入外部模块

Question

所以我有一个看起来像这样的项目:

app/  bin/  lib/  src/    main/      submodule.ts    utilities/      common.ts    main.ts    tsconfig.json  gulpfile.js

and app/src/main/submodule.ts needs to import app/src/utilities/common.ts. I am trying to use the ES6 syntax for this. Thus I expect something like this in submodule.ts:

import {common} from '/utilities/common';

根 / 是 app/src/ 因为这是找到 tsconfig 的地方。是的，app/src/utilities/common.ts 确实导出了一个名为 common 的模块。

问题是我收到“找不到模块‘/utilities/common’”错误。我尝试了多种方法:

• utilities/common
• /src/utilities/common
• /app/src/utilities/common

这些都不起作用。 ../utilities/common 的相对路径确实有效，但公共(public)模块的相对路径是维护的噩梦。

可能值得注意的是，我刚刚从 TS 1.5 更新到 1.6:使用 utilities/common 在 1.5 中有效。不过，我在 1.6 注释中找不到任何关于这些方面的重大更改的提及。

我提到了 gulpfile.ts 和其他文件夹，因为最终我希望 Gulp 从 src 获取 TS 文件并将编译后的 JS 文件放入 bin。我有理由相信我已经使用 gulp-typescript 为此正确配置了 Gulp，但为了完成，这里是我的 tsconfig.json 和 gulpfile.js 。

• tsconfig.json

  {    "compilerOptions": {        "module": "commonjs",        "target": "es5",        "experimentalDecorators": true,        "emitDecoratorMetadata": true,        "noEmitOnError": true    },    "filesGlob": [        "./**/*.ts",        "!./typings/**/*.ts"    ]}

• gulpfile.js

  var gulp = require('gulp');var ts   = require('gulp-typescript');var less = require('gulp-less');var sourcemaps = require('gulp-sourcemaps');var merge = require('merge2');var path  = require('path');var tsProject = ts.createProject('src/tsconfig.json', { noExternalResolve: true });gulp.task('html', function () {    gulp.src([            'src/**/*.html',        ])        .pipe(gulp.dest('bin'));});gulp.task('typescript', function () {    tsProject.src()        .pipe(sourcemaps.init())        .pipe(ts(tsProject))        .js        .pipe(sourcemaps.write())        .pipe(gulp.dest('bin'));});gulp.task('less', function () {    gulp.src([            'src/**/*.less',        ])        .pipe(sourcemaps.init())        .pipe(less())        .pipe(sourcemaps.write())        .pipe(gulp.dest('bin'))});gulp.task('default', ['html', 'typescript', 'less']);

Answer 1

终于解决了。每What's New , 1.6 更改了模块分辨率，使其表现得像 Node 的。我还没有研究 Node 的模块解析来确定是否可以使用该行为进行修复，但我找到了一个解决方法:

可以通过在 tsconfig.json 中指定 "moduleResolution": "classic" 来触发旧行为。