当前位置 博文首页 > TateWang:webpack + ts 配置路径别名无死角方法总结
自我体验加总结:在配置脚手架时,定制别名很有必要,可以使得代码更优雅,可读性更强。但在使用ts的时候,即便项目能够运行,vscode 确时长会提示 can’t find module xxx
。总结下来,如果想要完全解决这个问题需要考虑以下两方面:
tsconfig.json
进行配置。注:以上两种环境并不一定需要同时配置,例如使用成熟的第三方脚手架时,往往只需要配置其中一种(大多数一其中的一种为基础,自动同步)
loader
的工具,将别名与真实路径进行替换。此处以 webpack.resolve.alias 进行配置,按照官方 API使用即可 webpack.resolve.aliaswebpack.config.js
,使用 第三方配置工具时候 (此处以craco 配置 create-react-app 为例), :// craco.config.js
const path = require('path');
module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
let {src} = webpackConfig.resolve.alias;
webpackConfig.resolve.alias = Object.assign(webpackConfig.resolve.alias, {
'@': src,
'@components': path.resolve(src, 'components')
})
return webpackConfig;
}
}
}
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@typings/*": ["src/typings/*"],
"@components/*": ["src/components/*"],
"@style/*": ["src/style/*"],
"@utils/*": ["src/utils/*"],
"@router/*": ["src/router/*"],
"@store/*": ["src/store/*"],
}
}
}
tsconfig.json
, 当发现修改的配置未生效时大概率会是这种情况,需要新建文件,并添加 extends
字段:{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@typings/*": ["src/typings/*"],
"@components/*": ["src/components/*"],
"@style/*": ["src/style/*"],
"@utils/*": ["src/utils/*"],
"@router/*": ["src/router/*"],
"@store/*": ["src/store/*"],
}
}
}
{
"extends": "./tsconfig.extend.json"
}
eslint-plugin-import eslint-import-resolver-alias
, https://www.npmjs.com/package/eslint-import-resolver-alias// .eslintrc.js
module.exports = {
settings: {
'import/resolver': {
alias: [
['@', './src/']
]
}
}
};