Webpack alias typeScript"/>
CRA 配置Webpack alias typeScript
文章目录
- `Webpack`配置输出别名`alias`
Webpack
配置输出别名alias
- 一般我们会使用
npm run eject
或其他rewired
形式来弹出webpack
配置,或覆盖webpack config
达成目的 - 这里举例
eject and config alias
// npm run eject
// config in projectname/config/webpack.config.js -> resolve.alias
config = {'@': path.join(__dirname, '../', 'src'),
}// in App.tsx
import http from '@/http/index.js'
- 通常会遇到运行正常,但在
tsx
文件中,eslint
无法识别alias
的问题 - 你需要安装以下
npm i -S eslint-plugin-import eslint-import-resolver-alias
const eslintConfig = {"settings": {"import/resolver": {"node": {"paths": ["src"]},"alias": {"map": [["@","./src"]],"extensions": [".ts",".js",".jsx",".json",".tsx"]}}}
}
- 这里的
alias
比较好理解,而node
的path
含义不明,有记录显示: node
的path
是eslint
的import
插件的node
解析器的paths
,用于解析node
模块的路径- 通常完成这样的配置,还是不能通过,原因是使用了
tsx
typeScript
的语法,故还需要 - 安装
@typescript-eslint/parser eslint-import-resolver-typescript
- 并配置
// in package.json or eslintrc
const eslintConfig = {"extends": ["eslint:recommended","plugin:import/recommended","plugin:import/typescript"],"settings": {"import/resolver": {"typeScript": true,"node": true,}}
}// in tsconfig.js
compilerOptions = {"paths": {"@/*": ["./src/*"]}
}
- 注意注意:以上配置仅能是参考,像
extend/settings
中的配置不一定准确,有些可能冗余,须自行调整 - 理解
eslint
的相关配置概念,十分重要,你可以参考: - csdn1 eslint配置说明
- Ts config配置参考
更多推荐
CRA 配置Webpack alias typeScript
发布评论