我尽量缩短我在typescript中的导入
from 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"]
},
cannot find the module
所以我的问题是是否webpack的解决方案。别名与typescript工作?
我发现以下问题，但没有答案。
如果您使用的是ts-loader，您可能需要同步您的webpack alias/resolve设置与您的tsconfig.json中的paths设置。
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"Hello": ["src/components/Hello"]
}
}
}
如果你使用的是awesome-typescript-loader，那么webpack可以根据你的tsconfig.json中的paths设置自动计算出这个问题，根据repo中的这个问题的状态。这样，您就不需要在Webpack alias字段中复制相同的信息。
你错过了tsconfig.json中非常重要的一点:匹配模式!
应该这样配置:
"baseUrl": ".",
"paths": {
"appSrc/*": [
"src/*"
]
}
"*"是告诉TS匹配右侧任何内容的重要部分。
我从这篇文章中发现:类型安全的es2015模块导入路径与Webpack、Typescript和Jest混淆
注意
- 确保你所有的
webpack.config.js都更新了(例如，如果你使用故事书)。 - 如果你使用Visual Studio Code，你可能需要重新启动它，为了使弯弯曲曲的线条消失。
正如其他人提到的，您需要在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";
您还可以配置tsconfig-paths-webpack-plugin，以便在多个地方不重复您的别名。它将从tsconfig.json文件中获取别名并自动添加到webpack中。
如果有人仍然有这个问题，不要忘记将你的文件夹添加到tsconfig的"include"选项中。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 7与babel-plugin-module-resolver来解决别名。没有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';
Alias config in .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',
},
},
],
有两种情况
- 当你编写自定义webpack时，它与typescript一起工作，但不是直接工作。为了解释这一点，有两种类型的编译发生在后台。第一个tsx -> js，其中tsconfig。Json扮演了这个角色，但是当你真正编译js代码时，webpack就出现了。因此，对于别名，resolve应该放在tsconfig和webpack中，以成功运行应用程序 。
- 当你使用默认值时(在创建react app之后):你只需要在tsconfig中添加
"baseUrl": "./src"并查看代码工作。
仅为一个特定组件使用别名是不明智的做法，您应该告诉webpack配置，您已经通过使用tsconfig-paths-webpack-plugin在我的ts-config中设置了现有的别名，下面是示例配置
// 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目录中的文件路径。虽然我没有使用打字稿，但我认为它不会影响结果。