Webpack resolve.alias不能與typescript一起使用？

我儘量縮短我的進口打字稿Webpack resolve.alias不能與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起作用。然而打字稿的智能感知投訴cannot find the module

所以我的問題是，webpack的resolve.alias是否可以與打印機一起使用？

我發現下面的issue，但沒有答案。

來源

2016-11-05 starcorn

如果您使用ts-loader，您可能需要您的WebPack在tsconfig.json同步alias/resolve設置你的paths設置。

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

如果您使用awesome-typescript-loader，則可以的WebPack自動從paths設置在tsconfig.json想出解決辦法，按the status on this issue from the repo。這樣，您就不需要在Webpack alias字段中複製相同的信息。

來源

2016-11-05 22:51:36

似乎我需要設置'paths'屬性，當我使用'awesome-typescript-loader'時。我使用的是webpack1和awesome-typescript-loader 1.1.1。但它的工作原理:) – starcorn

這已經讓我第二次了..確保你設置baseUrl，如果你正在設置路徑。你需要兩個。 – SgtPooki

帶角度cli的新項目，添加app/components文件夾，將app.comonent移動到它自己的文件夾下。 tscinfig：添加baseUrl：「。」和路徑：{「〜c」：[「src/app/components」]}（c作爲組件）。用export「./app.component/app.component」添加index.d.ts。 npm安裝awesome-typescript-loader。 vs代碼可以從「〜c」解析導入{AppComponent}; （鼠標懸停顯示正確的路徑）。 ng build - > C：/Temp/a4-cli-test/src/app/app.module.ts錯誤（4,30）：找不到模塊'〜c'。我錯過了什麼嗎？ – Drusantia

-1

我認爲你可以做到這一點，它的工作你所描述的方法：你可以做import {Hello} from "Hello";

我知道我這樣做是爲了解決我的src/js目錄中的文件路徑

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

然後。雖然我不使用打字稿，但我不認爲這會影響結果。

來源

2016-11-05 22:54:34

但打字稿是這裏的問題 – Luckylooke

Webpack resolve.alias不能與typescript一起使用？

回答

相關問題