在Gatsby/Typescript项目中设置导入别名

Question

我试图在Gatsby和Typescript项目中创建导入别名。我使用npm包esint导入解析程序别名。

所以我可以使用：

import Layout from '@components/Layout';

在gatsby-node.js中，我有：

const-path=require('path'(；

exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
@components: path.resolve(__dirname, 'src/components'),
@static: path.resolve(__dirname, 'static'),
},
},
});
};

在.eslintrc.js中，我有：

alias: [['@components', './src/components']]

在我有：

"baseUrl": "./src",
"paths": {
"@components": ["/components"]

现在我在VSCode中得到这个错误：

无法解析模块的路径"组件/布局"。eslinimport/没有未解析的

Answer 1

您不需要gatsby-plugin-resolve-src就可以允许从/src导入。默认情况下，它由盖茨比处理。项目文件夹中的所有内容，如果正确导出，都可以作为React组件导入。

如果你想在导入中添加混叠，路径的多重相关性可以避免类似的情况：

import Subscribe from '../../../../../../../core/modules/newsletter/mixins/Subscribe'

您可以通过添加setWebpackConfigAPI(在gatsby-node.js:中

exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
modules: [path.resolve(__dirname, `src`), `node_modules`],
},
});
};

此外，您可以添加：

const path = require("path");
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
"@components": path.resolve(__dirname, "src/components"),
"@static": path.resolve(__dirname, "static")
}
}
});
}

第一个片段将允许您从node_modules和/components文件夹中进行动态导入。

要解决ESlint导入问题，您需要通过以下方式安装eslint-import-resolver-alias插件：

npm i -D eslint-import-resolver-alias

然后在.eslint文件中添加以下配置：

{
"settings": {
"import/resolver": {
"alias": [
["@components", "./src/components"]
]
}
}
}

你可能会发现这篇文章很有帮助。

Answer 2

我通过在.eslintrc.js:内将paths: ['./src'],添加到import/resolver来实现它

'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
paths: ['./src'],
},
alias: [['components', './src/components']],
},