在组件开发中,业务功能和基础组件一般分开放,比如在我们的项目中,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
// ...
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')
}
},
// ...
通过上述配置,webpack已经没问题,再将代码中所有关于调用这些components、container、utils和stories的代码进行简化,示例如下
// ./src/test/index.tsx
import AjaxTest from '../../components/Ajax'
// ./src/test/index.tsx
import AjaxTest from '@components/Ajax'
因为ts项目用了tslint来规约代码,所以会报错,查看官网关于no-implicit-dependencies的说明,将tslint.json增加如下规则
{
......
"rules": {
......
"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"]
},
......
},
......
}