相对 JS 文件导入的 TypeScript 分辨率与导入的 Chrome 分辨率答案

【问题标题】：TypeScript resolution of relative JS file import vs. Chrome resolution of import相对 JS 文件导入的 TypeScript 分辨率与导入的 Chrome 分辨率
【发布时间】：2019-08-06 03:36:01
【问题描述】：

我的 ASP.NET Core 项目是这样布局的。

/
/ts/Module.ts
/ts/OtherModule.ts
/node_modules/moment/moment.js
/wwwroot/lib/moment/moment.js
/wwwroot/js/Module.js
/wwwroot/js/OtherModule.js

Module.ts 有这样的导入：

import * as moment from "./cannot-get-this-to-work.js";
import * as other from "./OtherModule.js";

由于 TypeScript 不会在编译时重写这些路径，因此它们必须是正确的相对路径，Chrome 才能构建 URL 以获取它们。这适用于我自己的模块，它们都是并排的。

但对于其他模块，我当然将它们放在 /node_modules 中，但随后我将它们复制到 /wwwroot/lib 以进行部署。

所以在我的 TS 文件中，我大概需要这一行：

import * as moment from "../lib/moment/moment.js";

但这对于 TypeScript 在设计时是不合适的。

令人讨厌的是，通过将 tsconfig.json:baseUrl 设置为 ./wwwroot/，我可以让 TS 编译器/编辑器识别 lib/moment/moment.js，但 Chrome 并不认为这是相对的。

更烦人的是，当我在编辑器中键入./lib/ 时尝试简单地修复这种情况时，TS 编译器似乎理解我尝试输入的路径并“有用地”删除了领先的 ./对 Chrome 没用！

就好像 Chrome 想要相对路径以一种方式开始，而 TS 想要另一种方式！

这简直太疯狂了！哈亚尔普！

另外，不知道如何判断正在使用哪个版本的 TS VS，或者如何更新它或其他任何东西。

【问题讨论】：

官方提出的解决方案是import maps，当它准备好后，你可以在编译时使用非相对导入来引用node_modules中的“外部”模块，然后有导入映射告诉浏览器在哪里可以找到它们。目前，每个人都只是在编译后使用 webpack 之类的打包工具。
啊，谢谢，还有我希望我只是愚蠢。我会考虑使用 gulp-replace 并重写路径。

标签： typescript

【解决方案1】：

我在 TS 编译任务期间使用了一个名为 gulp-replace 的 NPM 包来修复路径，就像这样。

// gulpfile.js
const ts = require("gulp-typescript");
const tsProject = ts.createProject("tsconfig.json");
const replace = require("gulp-replace");


function compileTypescript() {
    return tsProject.src()
        .pipe(tsProject())        
        .js.pipe(replace('from "lib', 'from "../lib'))
        .pipe(gulp.dest("wwwroot/js"));
}
gulp.task(compileTypescript);

【讨论】：