一次解决React+TypeScript+Webpack 别名（alias）找不到问题的过程

引言

在组件开发中，业务功能和基础组件一般分开放，比如在我们的项目中，components为基础组件， container为业务组件，但是在container中调用components中的组件时，必须通过相对路径如../../components/XXXX才能找到要用的基础组件，这里 ../../在开发时其实时一种浪费。为了解决这个问题，我们引入了webpack.resolve.alias功能。

目录结构


.
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── template.html
├── README.md
├── src
│ ├── components
│ ├── config.ts
│ ├── container
│ ├── index.scss
│ ├── index.tsx
│ ├── README.md
│ ├── routers.tsx
│ ├── stories
│ ├── @types
│ └── utils
├── styleguide.config.js
├── tsconfig.json
├── tslint.json
├── webpack.config.js
├── webpack.doc.js
├── webpack.vendor.js
└── yarn.lock


webpack 配置

// ...
resolve: {
    extensions: ['.ts', '.tsx', '.js', 'config.js', '.json'],
    alias: {
      '@components': path.resolve(__dirname, './src/components'),
      '@container': path.resolve(__dirname, './src/container'),
      '@utils': path.resolve(__dirname, './src/utils'),
      '@stories': path.resolve(__dirname, './src/stories')
    }
  },
// ...

        

          
        
        
        

          

          AI 代码解读
        
      
      

通过上述配置，webpack已经没问题，再将代码中所有关于调用这些components、container、utils和stories的代码进行简化，示例如下

之前

// ./src/test/index.tsx
import AjaxTest from '../../components/Ajax'

        

          
        
        
        

          

          AI 代码解读
        
      
      

之后

// ./src/test/index.tsx
import AjaxTest from '@components/Ajax'

        

          
        
        
        

          

          AI 代码解读
        
      
      

问题1 [tslint] Module '@components/Ajax' is not listed as dependency in package.json (no-implicit-dependencies)

因为ts项目用了tslint来规约代码，所以会报错，查看官网关于no-implicit-dependencies的说明，将tslint.json增加如下规则

{
......
  "rules": {
  ......
    "no-implicit-dependencies": ["optional", ["src"]]
  } ,
  ......
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

问题2 "no-implicit-dependencies": ["optional", ["src"]]

一看时ts报错，肯定时编译环境有问题，查看官网关于paths的定义,paths主要用来做目录映射，shangma上面webpack解决的时打包过程中的映射，并没有解决ts编译时的映射，所以在tsconfig.json中增加一项映射信息

{
  "compilerOptions": {
    "baseUrl": ".",
    ......
    "paths": {
      "@components/*": ["./src/components/*"],
      "@container/*": ["./src/container/*"],
      "@utils/*": ["./src/utils"],
      "@stories/*": ["./src/stories"]
    },
    ......
  },
  ......
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

编译效果