CRA 配置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/fig.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配置参考