我正在尝试在webpack中实现一些别名(alias)。 我想要做的是,不使用以下方式从文件夹组件(components)中导入App.js上的组件。
./components/layout/Header/Header
我想要这个:
@components/layout/Header/Header
即为了避免未来创建嵌套文件夹时出现问题。 我所做的是在webpack.config.js中编写了以下代码:
module.exports = {
context: __dirname,
entry: './src/index.js',
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'main.js',
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
alias: {
src: path.resolve(__dirname, 'src'),
assets: path.resolve(__dirname, 'src/assets'),
components: path.resolve(__dirname, 'src/components'),
}
}
.
.
.
};
并且在 tsconfig.json 文件中:
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": ".",
"paths": {
"@": ["./src/*"],
"@assets": ["./src/assets/*"],
"@components": ["./src/components/*"]
},
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
},
"include": [
"src"
]
}
当我运行 "npm run start",即 "react-scripts start" 时,我会收到以下错误:
./src/App.js
Module not found: Can't resolve '@components/layout/Header/Header' in 'C:\Users\Angel\Documents\React\thermometer\src'
另外,我注意到当我运行 "npm run start" 命令时,我在 tsconfig.json 文件中创建的对象 "paths" 被删除并且文件重置。我是从零开始创建 React 项目的新手。谢谢!
@
,或者至少不是以那种方式。你可以去掉@
,使用例如components/layout/...
。否则,在Webpack存储库中寻找或创建问题可能会帮助您找到更好的解决方案,或者至少让他们知道这个问题。 - Kelvin Schoofs