react+ts项目的别名配置

首先当我们安装了ts以后项目里面就会出现一个tsconfig的文件。这个里面有一个配置项叫做paths，专门是为了编译的时候配合webpack找别名的。但是当我们配置paths的时候一定要记得配置baseUrl，不然项目就会报错。
下面是tsconfig的配置文件

{
  "compilerOptions": {
    "allowUnreachableCode": true, // 不报告执行不到的代码错误。
    "allowUnusedLabels": false,	// 不报告未使用的标签错误
    "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
    "experimentalDecorators": true, // 启用实验性的ES装饰器
    "jsx": "react", // 在 .tsx文件里支持JSX
    "sourceMap": true, // 是否生成map文件
    "module": "commonjs", // 指定生成哪个模块系统代码
    "noImplicitAny": false, // 是否默认禁用 any
    "removeComments": true, // 是否移除注释
    "types": [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
      "node", // 引入 node 的类型声明
    ],
    "baseUrl": "src", // 工作根目录
    "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
      "@/*": ["./*"]
    },
    "target": "ESNext", // 编译的目标是什么版本的
    "outDir": "./dist", // 输出目录
    "declaration": true, // 是否自动创建类型声明文件
    "declarationDir": "./lib", // 类型声明文件的输出目录
    "allowJs": true, // 允许编译javascript文件。
    "lib": [ // 编译过程中需要引入的库文件的列表
      "es5",
      "es2015",
      "es2016",
      "es2017",
      "es2018",
      "dom"
    ]
  },
  // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
  "include": [
    "src/**/*"
  ],
  // 指定一个排除列表（include的反向操作）
  "exclude": [
    "demo.ts"
  ],
  // 指定哪些文件使用该配置（属于手动一个个指定文件）
  "files": [
    "demo.ts"
  ]
}

在paths配置项里面我们给出了componenets的别名配置。 注意点：是baseUrl的配置项一定是src，不是默认的点。 在webpack.config.js里面我们也要配置别名

const path = require('path');
module.exports = {
    resolve: {
        //省略其他配置项
        alias: {
           '@': paths.appSrc,
           'react-native': 'react-native-web',
        },
        //省略其他配置项
      }
};

做完以上2步，我们就可以在项目里面直接使用别名引入项目了 在组件里面：import Slider from '@/components/slider/slider' 当然你也可以按照上面的例子直接将components配置起来。