我试图在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的智能提示会抱怨它找不到该模块。
我的问题是webpack的resolve.alias是否适用于TypeScript？
我发现了这个问题，但没有答案。
如果您正在使用ts-loader，则可能需要将 webpack 的alias/resolve设置与tsconfig.json中的paths设置同步。
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"Hello": ["src/components/Hello"]
}
}
}
如果您正在使用awesome-typescript-loader，那么webpack可以自动从tsconfig.json中的paths设置中找到这个信息，详情请参见存储库上有关此问题的状态。这样，您就不需要在Webpack的alias字段中重复相同的信息。
awesome-typescript-loader时也设置paths属性。我正在使用webpack1和awesome-typescript-loader 1.1.1。但是它仍然可以工作 :) - starcornTsConfigPathsPlugin（如在 awesome-typescript-loader 的 README 中所述）使其正常工作，但是像 ts-loader 一样同步配置似乎可以解决问题。 - Shepmaster在tsconfig.json中，你漏掉了一个非常重要的点：匹配模式！
它应该像这样配置：
"baseUrl": ".",
"paths": {
"appSrc/*": [
"src/*"
]
}
"*"是告诉TS要匹配右侧任何内容的重要部分。
我从这篇文章中发现了这一点：Type-safe es2015 module import path aliasing with Webpack, Typescript and Jest
注意：
webpack.config.js都已更新（例如，如果您使用storybook）。正如其他人所提到的，你需要在webpack.config.js中提供一个alias:
resolve: {
extensions: [".ts", ".js"],
alias: {
forms: path.resolve(__dirname, "src/forms/")
}
},
这需要与你的 tsconfig.json 文件同步 (baseUrl 和 paths 是必需的)。
"compilerOptions": {
baseUrl: "./",
...
paths: {
"forms/*": ["src/forms/*"]
}
}
import { FormsModule } from "forms/my-forms/my-forms.module";
import x from'〜components / x，它被翻译为src / components / x。 - Qwerty您还可以配置tsconfig-paths-webpack-plugin，以便不需要在多个地方重复使用别名。它将从tsconfig.json文件中获取别名并自动将它们添加到webpack中。
{
"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来解析别名。由于Babel 7使用@babel/preset-typescript支持TypeScript，因此没有使用ts-loader或awesome-typescript-loader。我不得不为每个别名添加额外的路径配置，以自动加载模块根目录（例如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',
},
},
],
有两种情况：
"baseUrl": "./src"，然后查看代码即可正常工作。仅为一个特定组件使用别名并不是一个好的做法，你应该告诉 webpack 配置文件，在我的 ts-config 中已经设置了现有的别名，可以使用 tsconfig-paths-webpack-plugin，以下是示例配置：
// webpack.config.js
module.exports = {
...
resolve: {
plugins: [new TsconfigPathsPlugin({/* options: see below */})]
}
...
}
//ts-config.json
{
"compilerOptions": {
"baseUrl": "./src",
"components/*": "components/*"
...
},
...
}
webpack.config中指定你想要的别名。但如果你不想这样做，你可以按照上述配置进行操作。// webpack.config.js
module.export = {
resolve: {
alias: {
'components': path.resolve(__dirname, 'src/components')
}
}
}
tsconfig 或 jsconfig 的作用是为您的编辑器提供智能感知，并为您的打包工具提供指导。//ts-config.json
{
"compilerOptions": {
"baseUrl": "./src",
"components/*": "components/*"
...
},
...
}
import {Home} from 'components';
...
如果您对于webpack.config如何依赖于您的tsconfig.json感到好奇，您可以阅读ts-loader。
我认为你可以这样做，并且使它按照你所描述的方式工作：
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目录中的文件路径。虽然我没有使用typescript，但我不认为它会影响结果。