我尝试在我的 Gatsby 和 Typescript 项目中创建导入别名。我使用 npm 包 eslint-import-resolver-alias。
所以我可以使用:
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 中收到此错误:
<块引用>无法解析模块路径 'components/layout'.eslintimport/no-unresolved
答案 0 :(得分:0)
您不需要 gatsby-plugin-resolve-src
来允许从 /src
导入。默认情况下,它由 Gatsby 处理。如果正确导出,项目文件夹中的所有内容都可以作为 React 组件导入。
如果你想在你的导入中添加别名,路径的多重相对性以避免类似的事情:
import Subscribe from '../../../../../../../core/modules/newsletter/mixins/Subscribe'
您可以通过添加 setWebpackConfig
API(在您的 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"]
]
}
}
}
您可能会发现 this article 很有帮助。
答案 1 :(得分:0)
我通过将 paths: ['./src'],
添加到 import/resolver
中的 .eslintrc.js
使其工作:
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
paths: ['./src'],
},
alias: [['components', './src/components']],
},