Question

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

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

到import {Hello} from "Hello";

为此我发现你可以在webpack中使用resolve.alias，因此我将该部分配置如下

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是否适用于打字稿？

我找到了issue，但没有答案。

Answer 1

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

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

如果您正在使用awesome-typescript-loader，那么webpack可以根据您paths的{{1}}设置自动计算出来，按照the status on this issue from the repo。这样，您就不需要在Webpack tsconfig.json字段中复制相同的信息。

Answer 2

Dudes，你在tsconfig.json中缺少一个非常重要的观点：匹配模式！

它应该像这样配置：

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

＆＃34; *＆＃34;是告诉TS匹配右侧任何东西的重要部分。

我发现这篇文章： https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010

Answer 3

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

    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 4

我必须对Caio Saldanha的解决方案进行小幅调整才能使其在我的环境中正常工作。

我正在将Babel 7与babel-plugin-module-resolver一起使用来解析别名。没有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/*"],
    ...
}

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

Answer 5

如果仍然有此问题，请不要忘记将文件夹添加到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 6

有2例

编写自定义Webpack时它适用于打字稿，但不能直接使用。解释一下，后台有两种编译类型。首先是tsx-> js，由tsconfig.json担当角色，但是当您实际编译js代码时，webpack出现了。因此，对于别名，应将解析放在两个位置，即tsconfig和webpack中，以成功运行应用程序
使用默认值时（在创建react应用后）：您只需在tsconfig中添加"baseUrl": "./src"即可查看代码。

Answer 7

我认为你可以这样做并让它按你描述的方式运作：

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目录中的文件路径。我不是在使用打字稿，但我认为这不会影响结果。

Webpack resolve.alias不适用于typescript？

7 个答案: