【Typescript】paths alias别名设置

前言

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

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

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

【最终效果】

​

【项目目录结构】

原理

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

1. 修改tsconfig.json

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

2. 修改编译工具配置文件，比如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'),
}