【Typescript】paths alias别名设置

最新推荐文章于 2024-11-28 02:22:30 发布

乐闻x

最新推荐文章于 2024-11-28 02:22:30 发布

阅读量2.9k

点赞数 1

分类专栏： TypeScript 前端知识图谱文章标签： typescript javascript webpack

本文链接：https://blog.csdn.net/m0_37890289/article/details/121891137

版权

前端知识图谱同时被 2 个专栏收录

112 篇文章

订阅专栏

TypeScript

9 篇文章

订阅专栏

本文介绍了如何通过设置Typescript的`baseUrl`和`paths`属性，以及在Webpack或Rollup中配置别名，来解决前端项目中模块引用路径过深的问题。这样做可以提高开发效率，减少编译错误，并保持项目结构清晰。通过实例展示了在tsconfig.json和webpack.config.js中的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

Typescript 不仅方便前端在开发阶段就能发现很多问题，同时也能给开发者很多提示。比如我们 Import 其他ESModule时，如果路径不对就会给出提示。

只有正确引用路径，Typescript才不会提示报错。但是使用这种相对路径引用方式，会出现层级过深的情况

如果使用统一前缀引入，可以避免上述问题

【最终效果】

【项目目录结构】

原理

我们使用设置别名的方式解决上述问题，两个地方要同时修改，tsconfig使vscode显示不报错,webpack.js使打包编译不报错

修改tsconfig.json

{
  "compilerOptions": {
 		...
    "baseUrl": ".",
    "paths":{
      "@/*":["src/*"]
    }
  },
  "include": ["./src"]
}

修改编译工具配置文件，比如webpack.config.js、rollup.config.js等

{
	resolve:{
		alias:{
			 '@': path.resolve(__dirname, '..', 'src'),
		}
	}
}

实战

tsconfig.json

{
  "compilerOptions": {
 		...
    "baseUrl": ".",
    "paths":{
      "@/*":["src/*"]
    }
  },
  "include": ["./src"]
}

Webpack

webpack.config.js

{
	resolve:{
		alias:{
			 '@': path.resolve(__dirname, '..', 'src'),
		}
	}
}

Rollup

Rollup.config.js

npm install @rollup/plugin-alias

import alias from '@rollup/plugin-alias';

module.exports = {
  plugins: [
    alias({
      entries: [
        { find: '@', replacement: 'src' },
      ]
    })
  ]
};

Taro

config/index.js

alias:{
	"@/": path.resolve(__dirname, '..', 'src'),
}