Typescript/ES6：使用绝对路径导入 src 文件答案

【问题标题】：Typescript/ES6: import src files with absolute pathTypescript/ES6：使用绝对路径导入 src 文件
【发布时间】：2019-04-24 23:46:16
【问题描述】：

在我的一个文件中，我导入了另一个 commonjs 模块

import * as at from '../../../at-angular'

我更愿意这样做

import * as at from 'fv/at-angular'

fv 是我的 src 目录。所以我的应用文件夹结构是这样的：

- src
  - at-angular.ts
  - core
    - services
  ....

我能否以某种方式启用 typescript 以使 fv 指向 src？

【问题讨论】：

How can I reference typescript files without absolute paths?的可能重复
它不是重复的。我很确定他的意思是他想用绝对路径捆绑文件。

标签： typescript

【解决方案1】：

TypeScript 1.8（尚未发布）将具有路径映射功能：

路径映射

有时模块并不直接位于 baseUrl 下。这是可以控制在这种情况下如何计算位置路径映射。使用以下 JSON 指定路径映射结构：
{
    "paths": {
        "pattern-1": "substitution" | ["list of substitutions"],
        "pattern-2": "substitution" | ["list of substitutions"],
        ...
        "pattern-N": "substitution" | ["list of substitutions"]
    }
}
模式和替换是可以有零或一的字符串星号（'*'）。模式和替换的解释将在解决过程部分进行描述。

https://github.com/Microsoft/TypeScript/issues/5039

这可能是您正在寻找的。p>

【讨论】：

但您的答案不起作用，因为这仅适用于编译器了解模块的位置。但是转译后路径没有更新，它会导致任何应用程序节点或 webpack 中的错误..
@azarus：也许我应该删除这篇文章，我现在没有密切关注 TypeScript。我不知道在atm解决它的正确方法是什么。
遗憾的是没有合适的方法，只能在 tsc 中定位 ESnext 然后使用 babel 转换模块。
我已经发布了一个答案，它根据 tsconfig.json 路径映射将模块名称转换为正确的位置。

【解决方案2】：

我能够在我的 webpack2 设置上进行绝对路径导入。这是我做的你必须设置 tsconfig.json 来支持它。这是一个例子：https://medium.com/@timwong/typescript-with-webpack2-how-to-do-import-with-absolute-path-f33b1826d330

这是我帖子中的示例。

Webpack2 解析

/** 
* Assuming the following project structure
*   /src
*     /app
*       /services
*       /models
*     /node_modules
*     .webpack.config.js
*     tsconfig.json
*/
var path = require('path');
module.exports = {
  module: { ... },
  devtool: '...',
  resolve: {
    modules: [
      path.resolve('./node_modules'),
      path.resolve('./app')
    ]
  }

通过定义 resolve.modules，我们指示 Webpack 使用这些路径作为根文件夹搜索（也称为解析）组件。打字稿配置

好的，现在 Webpack 可以使用了； TypeScript 呢？如果您使用的是 Atom 或 VSCode 等编辑器，您可能会看到一个突出显示的错误，指出 TypeScript 找不到模块。这是因为 TypeScript 不知道这个根模块设置。我们也必须在 tsconfig.json 中提供这些信息。

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

通过定义路径对象和 baseUrl，我们指示 TypeScript 编译器在解析导入语句时查看 app 文件夹。希望这个简单的示例有助于解除对第一次使用 TypeScript 和 Webpack2 时遇到此配置问题的任何人的阻止。

【讨论】：

您能否在答案中包含该示例。链接可能会随着时间的推移而消失，这意味着其他 Stack 用户无法从本问答中受益
当然@Todd，添加了我的例子。
感谢您的加入

【解决方案3】：

我为源代码创建了一个要点，以使用绝对路径名或 tsconfig.json 中定义的任何其他路径它适用于 Browserify+Watchify+Tsify 也适用于 Gulp-typescript。

https://gist.github.com/azarus/f369ee2ab0283ba0793b0ccf0e9ec590

它将 tsconfig.json 中定义的路径名和 baseUrl 转换为它们的相对路径名。享受吧！

【讨论】：

【解决方案4】：

这是我的设置，它可以工作。只需构建，当您想使用节点在 dist 目录中运行代码时，您必须传递 NODE_PATH=dist。

将此脚本添加到您的 package.json 脚本并运行它以测试一切正常。

"build-test": "NODE_PATH=dist node --inspect dist"

【讨论】：