我尝试缩短我在打字稿中的导入
来自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 是否适用于 typescript？
我发现关注issue，但没有答案。
【问题讨论】：
标签： typescript webpack
您还可以配置tsconfig-paths-webpack-plugin，以免在多个地方重复您的别名。它将从tsconfig.json 文件中提取别名并自动将它们添加到 webpack。
【讨论】：
您在tsconfig.json 中遗漏了一个非常重要的点：
匹配模式！
应该这样配置：
"baseUrl": ".",
"paths": {
"appSrc/*": [
"src/*"
]
}
“*”是告诉 TS 匹配右侧任何内容的重要部分。
我从这篇文章中发现了这一点：Type-safe es2015 module import path aliasing with Webpack, Typescript and Jest
注意
webpack.config.js 都已更新（例如，如果您使用
故事书）。 【讨论】：
有2种情况
"baseUrl": "./src" 并查看代码工作。【讨论】：
正如其他人提到的，您需要在 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";
【讨论】：
"~*": ["src/*"]？结果是import x from '~components/x，转换为src/components/x。
如果还有人遇到此问题，请不要忘记将您的文件夹添加到 tsconfig.json 的“包含”选项中，如下所示：
{
"compilerOptions": {
"sourceMap": true,
"allowJs": true,
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
},
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"lib": [
"es2016",
"dom"
]
},
"outDir": "./built/",
"include": [
"./src/**/*",
"./tests/**/*"
]
}
【讨论】：
我必须对 Caio Saldanha 的解决方案进行小幅调整才能使其在我的环境中发挥作用。
我正在使用带有babel-plugin-module-resolver 的 Babel 7 来解析别名。没有 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/*"],
...
}
在/component 文件夹中有一个index.ts，其内容如下：
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',
},
},
],
【讨论】：
如果你使用ts-loader，你可能需要将你的webpack alias/resolve 设置与paths 在tsconfig.json 中的设置同步。
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"Hello": ["src/components/Hello"]
}
}
}
如果你使用awesome-typescript-loader，那么webpack 可以根据the status on this issue from the repo 自动从tsconfig.json 中的paths 设置中解决这个问题。这样，您就不需要在 Webpack alias 字段中复制相同的信息。
【讨论】：
awesome-typescript-loader 时也需要设置paths 属性。我正在使用 webpack1 和 awesome-typescript-loader 1.1.1。但它虽然有效:)
TsConfigPathsPlugin as documented on awesome-typescript-loader's README 时让它工作，但像 ts-loader 一样同步配置似乎工作。
index 以外的文件的别名。重命名文件并修复别名使路径正常工作。谢谢！
我认为你可以做到这一点并让它按照你描述的方式工作：
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 目录中的文件路径。虽然我没有使用打字稿，但我认为它不会影响结果。
【讨论】：