Webpack resolve.alias 不适用于打字稿？

Question

我尝试在打字稿中缩短我的导入

from import {Hello} from "./components/Hello";

import {Hello} from "Hello";

对于我发现你可以使用resolve.alias中的WebPack因此，我配置了部分如下

resolve: {
    root: path.resolve(__dirname),
    alias: {
        Hello: "src/components/Hello"
    },
    extensions: ["", ".ts", ".tsx", ".js"]
},

Webpack 构建，并且输出 bundle.js 工作。 然而打字稿的智能感知抱怨它cannot find the module

所以我的问题是 webpack 的 resolve.alias 是否适用于打字稿？

我发现了以下问题，但没有答案。

Answer 1

如果您使用ts-loader ，则可能需要将您的 webpack alias / resolve设置与tsconfig.json paths设置tsconfig.json 。

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "Hello": ["src/components/Hello"]
        }
    }
}

如果您使用的是awesome-typescript-loader typescript awesome-typescript-loader ，那么 webpack 可以根据 repo 中关于此问题的状态，从您的tsconfig.json的paths设置中自动计算出来。 这样，您就不需要在 Webpack alias字段中复制相同的信息。

Answer 2

您在tsconfig.json中遗漏了一个非常重要的点：匹配模式！

它应该像这样配置：

"baseUrl": ".",
"paths": {
    "appSrc/*": [
        "src/*"
    ]
 }

“*”是告诉 TS 匹配右侧任何内容的重要部分。

我从这篇文章中发现： Type-safe es2015 module import path aliasing with Webpack, Typescript and Jest

注意

• 确保您的所有webpack.config.js都已更新（例如，如果您使用故事书）。
• 如果您使用 Visual Studio Code，您可能需要重新启动它，以便波浪线消失。

Answer 3

正如其他人提到的，您需要在 webpack.config.js 中提供alias ：

    resolve: { 

        extensions: [".ts", ".js"],
        alias: {
            forms: path.resolve(__dirname, "src/forms/")
        } 
    },

这需要与您的tsconfig.json文件同步（需要tsconfig.json和路径）。

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

注意：通配符模式是与您的解析别名配置匹配所必需的。

然后您可以使用别名导入任何库：

import { FormsModule } from "forms/my-forms/my-forms.module";

Answer 4

如果有人仍然遇到此问题，请不要忘记将您的文件夹添加到 tsconfig.json 上的“include”选项中，如下所示：

{
  "compilerOptions": {
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "outDir": "./built/",
  "include": [
    "./src/**/*",
    "./tests/**/*"
  ]
}

Answer 5

我不得不对 Caio Saldanha 的解决方案进行小幅调整，使其适用于我的环境。

我正在使用带有babel-plugin-module-resolver Babel 7 来解析别名。 没有ts-loader或awesome-typescript-loader因为 Babel 7 使用@babel/preset-typescript支持开箱即用的 TypeScript。 我必须为每个别名添加额外的路径配置以自动加载模块根目录（例如index.ts ）：

"baseUrl": ".",
"paths": {  // this must be synchronized with .babelrc.js's module-resolver alias config
    "component": ["src/component/index.ts"],
    "component/*": ["src/component/*"],
    ...
}

在/component文件夹中有一个index.ts ，内容如下：

export { default as Logo } from './Logo';

如果没有额外的.../index.ts行，这个导入对我不起作用：

import { Logo } from 'component';  

.babelrc.js别名配置：

plugins: [
[
    'module-resolver',
    {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        root: ['./src'],
        alias: {
        // this must be synchronized with tsconfig.json's path configuration
            component: './src/component',
        },
    },
],

Answer 6

您还可以配置tsconfig-paths-webpack-plugin以免在多个地方重复您的别名。 它将从tsconfig.json文件中获取别名并自动将它们添加到 webpack。

Answer 7

有2种情况

1. 当您编写自定义 webpack 时，它可以与typescript一起使用，但不能直接使用。 解释一下，有两种类型的编译发生在后台。 首先是 tsx -> js，其中 tsconfig.json 发挥作用，但是当您实际编译 js 代码时，webpack 就会出现。 所以对于别名，resolve 应该放在两个地方，即在 tsconfig 和 webpack 中才能成功运行应用程序
2. 当您使用默认值时（在创建反应应用程序之后） ：您只需要在 tsconfig 中添加"baseUrl": "./src"并查看代码工作。

Answer 8

我认为你可以做到这一点，并让它按照你描述的方式工作：

resolve: {
    root: [
        path.resolve(__dirname),
        <path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components')
    ], 
    extensions: ["", ".ts", ".tsx", ".js"]
},

然后你可以import {Hello} from "Hello";

我知道我这样做是为了解析src/js目录中的文件路径。 虽然我没有使用打字稿，但我认为它不会影响结果。