webpack + ts 配置路径别名无死角方法总结
2021-02-19 21:27
796 查看
webpack + ts 配置路径别名总结
自我体验加总结:在配置脚手架时,定制别名很有必要,可以使得代码更优雅,可读性更强。但在使用ts的时候,即便项目能够运行,vscode 确时长会提示
can’t find module xxx。总结下来,如果想要完全解决这个问题需要考虑以下两方面:
概述
语法上的正确性
- 此处主要是通过构建工具,如webpack、parcel、rollup等,在编译时将路径的别名进行替换、拼接。从而使得别名的引用能够映射为正确的路径。
环境的正确性
- eslint 环境:如果使用的js,未使用ts。则需要保证 eslint 的路径别名配置正确,或者更改报警级别(通常不建议这么做)
- typescript 环境:如果使用的是ts,多数情况下需要对
tsconfig.json
进行配置。
注:以上两种环境并不一定需要同时配置,例如使用成熟的第三方脚手架时,往往只需要配置其中一种(大多数一其中的一种为基础,自动同步)
具体应对
保证语法的正确性
- 原理则是通过类似于
loader
的工具,将别名与真实路径进行替换。此处以 webpack.resolve.alias 进行配置,按照官方 API使用即可 webpack.resolve.alias - 当无法直接修改
webpack.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; } } }
保证环境的正确性:
typescript 环境
- tsconfig.json: 需要为 ts 声明路径映射表
{ "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/*"], } } }
- 为 tsconfig.json 添加 extends 字段:
{ "extends": "./tsconfig.extend.json" }
eslint 环境
- 如果是个人配置 eslint , 则需要 增加两个插件
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/'] ] } } };
注意
- 当把需要配置的工作完成后,需要关闭 vscode 并重新启动,才能生效。
- ts环境与es环境,有时只需要配置一项即可
相关文章推荐
- 基于webpack 实用配置方法总结
- Webpack中require路径为变量的解决方法总结
- Webpack 4.XXX 配置文件webpack.config.js和package.json【使用方法总结】
- webpack配置别名alias出现的错误匹配
- webpack中alias别名配置
- 修改vue+webpack run build的路径方法
- 获取web项目的绝对路径的方法总结
- webpack常见的配置总结 ---只是一些常见的配置
- Vue中使用webpack别名的方法实例详解
- 让 babel webpack vue 配置文件支持智能提示的方法
- webpack配置技巧--路径
- webpack打包后直接访问页面图片路径错误的解决方法
- vue设置webpack文件别名+配置路由的默认class
- 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
- 详解vue-cli脚手架中webpack配置方法
- VUE打包后配置配置文件修改请求url方法及webpack打包的文件生成同名文件方法
- webpack配置vue--修改导入包的路径
- webpack配置导致字体图标无法显示的解决方法
- Webpack常用配置、插件总结
- 使用webpack打包的后,公共请求路径的配置问题