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

Question

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

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

并app/src/main/submodule.ts需要导入app/src/utilities/common.ts.我正在尝试使用ES6语法.因此,我期待这样的事情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确实有效,但常见模块的相对路径是维护噩梦.

值得注意的是,我刚刚从TS 1.5更新到1.6:使用utilities/common曾在1.5中工作过.然而,我在1.6音符中找不到任何关于这些线路的突破性变化.

我提到了gulpfile.ts和其他文件夹,因为最终我希望Gulp从中获取TS文件src并将编译后的JS文件放入bin.我有理由相信我已经为此正确配置了Gulp gulp-typescript,但是为了完成起见,这里是我的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

终于解决了这个问题。根据新增功能，1.6 更改了模块分辨率，使其行为与 Node 类似。我还没有调查 Node 的模块解析来确定是否可以使用该行为进行修复，但我已经找到了一个解决方法：

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