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一起使用？

回答

相关问题