Webpack resolve.alias不适用于typescript？

Question

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

从 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工作.然而,打字稿的intellisense抱怨它cannot find the module

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

我发现了以下问题,但没有答案.

Answer 1

如果您正在使用ts-loader,则可能需要将您的webpack alias/ resolve设置与您的paths设置同步tsconfig.json.

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

如果您使用awesome-typescript-loader,则可以的WebPack自动从算出这个paths设置在你的tsconfig.json,按从回购这一问题上的地位.这样,您就不需要在Webpack alias字段中复制相同的信息.

Answer 2

老兄,你在tsconfig.json中缺少一个非常重要的点:匹配模式!

它应该像这样配置:

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

"*"是告诉TS匹配右侧任何内容的重要部分.

我在本文中发现:https: //medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010

Answer 3

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

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

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

    resolve: { 

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

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

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

注意：必须使用通配符模式才能与您的解析别名配置匹配。

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

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

Answer 6

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

我正在使用 Babel 7babel-plugin-module-resolver来解析别名。不支持ts-loader或awesome-typescript-loader因为 Babel 7 使用@babel/preset-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/*"],
    ...
}

具有index.ts中/component包含以下内容的文件夹：

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',
        },
    },
],