Typescript/ES6: 使用绝对路径导入src文件

Question

在我的一个文件中，我使用以下代码导入另一个CommonJS模块：

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

我更希望做...

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

我的src目录是fv，所以我的应用程序文件夹结构如下：

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

我是否可以通过某种方式使typescript中的fv指向src？

- rweng

---

可能是重复的问题：如何在不使用绝对路径的情况下引用 TypeScript 文件？ - toskv

这不是一个重复的问题。我非常确定他的意思是要将文件与绝对路径捆绑在一起。 - Playdome.io

Answer 1

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

Path mappings

Sometimes modules are not directly located under baseUrl. It is possible to control how locations are computed in such cases using path mappings. Path mappings are specified using the following JSON structure:

{
    "paths": {
        "pattern-1": "substitution" | ["list of substitutions"],
        "pattern-2": "substitution" | ["list of substitutions"],
        ...
        "pattern-N": "substitution" | ["list of substitutions"]
    }
}

Patterns and substitutions are strings that can have zero or one asteriks ('*'). Interpretation of both patterns and substitutions will be described in Resolution process section.

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

这可能是你正在寻找的内容。

- MartyIX

---

然而，你的答案并没有起作用，因为那仅仅是让编译器知道模块的位置。但在转译之后，路径并没有更新，这将会导致任何应用程序节点或者webpack出现错误。 - Playdome.io

@azarus：也许我应该删除这篇帖子，因为我现在并没有密切关注TypeScript。 我不知道目前解决它的正确方法。 - MartyIX

遗憾的是，没有更好的方法，只能在tsc中针对ESnext进行目标设置，然后使用babel来转换模块。 - Playdome.io

我已经发布了一个答案，根据tsconfig.json路径映射将模块名称转换为其正确的位置。 - Playdome.io

Answer 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使用这些路径作为根文件夹搜索（即解决）组件。 TypeScript配置

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

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

通过定义paths对象和baseUrl，我们指示TypeScript编译器在解析导入语句时查找app文件夹。希望这个简单的例子可以帮助那些在初次使用TypeScript和Webpack2时遇到配置问题的人解决难题。

- Tim Wong

---

你能在回答中包含示例吗？链接可能会随着时间的推移而失效，这意味着其他 Stack 用户无法从此问答中受益。 - Todd

当然，@Todd，我已经添加了我的示例。 - Tim Wong

感谢您包含了那个。 - Todd

Answer 3

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

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

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

- Richard Torcato

Answer 4

我已经为源代码创建了一个Gist，以使用绝对路径或在tsconfig.json中定义的任何其他路径。 它与Browserify+Watchify+Tsify很好地配合，也适用于Gulp-typescript。

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

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

- Playdome.io