绝对与相对路径

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从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

终于解决了这个问题。根据{{3}}，1.6更改了模块分辨率以表现得像Node一样。我还没有调查Node的模块分辨率，以确定是否可以使用该行为进行修复，但我找到了一个解决方法：

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

Answer 2

如果路径以./或../开头，则相对于当前文件执行模块分辨率。

以下是使用以下内容的简单示例：

/
/src/
/src/thing.ts
/main/
/main/submodule.ts
/utilities/
/utilities/common.ts

因此，将common.ts导入submodule.ts的正确语句将是：

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

您还可以使用以下根路径（请注意，此处没有前导/或任何.）：

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

这适用于Visual Studio代码，父文件夹src作为工作文件夹打开。就我而言，我的目标是使用UMD模块攻击ES5。

如果可以通过从当前位置向上遍历找到模块（这是NodeJS的一项功能），也可以解析该模块。因此，您可以使用以下内容将thing.ts导入submodule.ts

import {something} from 'thing';

解析器将检查当前文件夹，然后检查父项，然后检查父项的父项......依此类推。

绝对与相对路径

当谈到网页上的链接时，我同意你的观点，即绝对路径更容易维护，尤其是在多个级别共享资源的情况下。

说到模块，我不确定我是否会看到相同的维护问题，因为这里的路径相对于导入语句出现在＆＃34;与网页无关。我想知道这可能是在错误的地方应用一个非常明智的规则。

使用ES6语法和绝对路径

2 个答案:

绝对与相对路径