web-dev-qa-db-ja.com

Webpack resolve.aliasはtypescriptで動作しませんか？

TypeScriptでインポートを短くしようとしています

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が機能します。ただし、TypeScriptのインテリセンスはcannot find the moduleと文句を言います。

だから私の質問は、webpackのresolve.aliasがtypescriptで動作するかどうかです？

次の issue が見つかりましたが、答えはありません。

typescriptwebpack
26
starcorn

ts-loaderを使用している場合、Webpack alias/resolve設定をtsconfig.jsonのpaths設定と同期する必要がある場合があります。

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

awesome-TypeScript-loaderを使用している場合、webpackはtsconfig.jsonのpaths設定から、これのステータス からこれを自動的に把握できます。リポジトリからの発行 。そうすれば、Webpack aliasフィールドに同じ情報を複製する必要はありません。

43
Daniel Rosenwasser

Tsconfig.jsonの非常に重要なポイントが1つありません：一致するパターンです！

次のように構成する必要があります。

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

「*」は、右側にあるものに一致するようにTSに指示する重要な部分です。

私はこの記事からそれを見つけました： https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-TypeScript-and-jest-fe461347e01 =

25
Caio Saldanha

他の人が述べたように、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';
6
pixelbits

Caio Saldanhaのソリューションを少し調整して、自分の環境で機能させる必要がありました。

エイリアスを解決するためにbabel-plugin-module-resolverとBabel 7を使用しています。 Babel 7はts-loaderを使用してすぐにTypeScriptをサポートするため、awesome-TypeScript-loaderまたは@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',
        },
    },
],
2
AMilassin

それでもこの問題が発生する場合は、次のように、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/**/*"
  ]
}
0
Patrick Stival Chaerke