前端常用开发工具的路径解析配置

开发 开发工具
随着需求的迭代与功能的完善,我们的项目也会愈发庞大而复杂,目录层级结构也会不断深化;以 React 实践清单中讨论的 React 项目组织方式为例,我们常会分为 components, containers, services, apis, ducks, store, i18n 等等目录。

本文是 Webpack CheatSheet | Webpack 基础与实践清单的一部分,项目代码可以参考 fe-boilerplate | 多技术栈前端项目模板

[[231939]]

路径解析

随着需求的迭代与功能的完善,我们的项目也会愈发庞大而复杂,目录层级结构也会不断深化;以 React 实践清单中讨论的 React 项目组织方式为例,我们常会分为 components, containers, services, apis, ducks, store, i18n 等等目录,如果全部以相对路径方式引入,可能会变成这个样子:

  1. import React from 'react'
  2. import { connect } from 'react-redux'
  3.  
  4. import { someConstant } from './../../config/constants'
  5. import MyComponent from './../../../components/MyComponent'
  6. import { myActionCreator } from './../../../ducks/someReducer'

毫无疑问,这样繁多的引用不可避免地会导致代码之间耦合度的增加,使得更难以重构或者优化。在适当地模块划分的基础上,我们希望在跨模块引用时,能够以绝对路径的方式,譬如:

  1. import React from 'react'
  2. import { connect } from 'react-redux'
  3. import { someConstant } from 'Config/constants'
  4. import MyComponent from 'Components/MyComponent'
  5. import { myActionCreator } from 'Ducks/someReducer'

当然,我们并不提倡过度地使用绝对路径引入,对于相对关系固定的组件,还是应该优先使用相对路径方式引入。

Webpack

如前文介绍,Webpack 允许我们使用 resolve.alias 来自定义路径解析:

  1. module.resolve = { 
  2.   alias: { 
  3.     Config: path.resolve(__dirname, '..''src''config'), 
  4.     Components: path.resolve(__dirname, '..''src''components'), 
  5.     Ducks: path.resolve(__dirname, '..''src''ducks'), 
  6.     Shared: path.resolve(__dirname, '..''src''shared'), 
  7.     App: path.join(__dirname, '..''src'
  8.   } 
  9. }; 

开发工具的支持是不可避免地因素,值得高兴的是 VSCode 允许我们在 jsconfig.json 中配置解析规则,Auto-Import 这样的自动导入工具同样能识别这些规则:

  1.   "compilerOptions": { 
  2.     "target""es2017"
  3.     "allowSyntheticDefaultImports"false
  4.     "baseUrl""./"
  5.     "paths": { 
  6.       "Config/*": ["src/config/*"], 
  7.       "Components/*": ["src/components/*"], 
  8.       "Ducks/*": ["src/ducks/*"], 
  9.       "Shared/*": ["src/shared/*"], 
  10.       "App/*": ["src/*"
  11.     } 
  12.   }, 
  13.   "exclude": ["node_modules""dist"

ESLint

ESLint 同样是前端开发不可或缺的部分,我们可以使用 eslint-import-resolver-webpack 来扩展 eslint-import 的模块解析,使用 npm 安装该模块之后进行如下配置:

  1. --- 
  2. settings: 
  3.   import/resolver: webpack  # take all defaults 

或者指定文件名:

  1. --- 
  2. settings: 
  3.   import/resolver: 
  4.     webpack: 
  5.       config: 'webpack.dev.config.js' 
  6.       config-index: 1   # optional, take the config at index 1 

对于未使用 Webpack 的项目,则可以考虑使用 eslint-import-resolver-alias:

  1. // .eslintrc.js 
  2. module.exports = { 
  3.   settings: { 
  4.     'import/resolver': { 
  5.       alias: { 
  6.         map: [ 
  7.           ['babel-polyfill''babel-polyfill/dist/polyfill.min.js'], 
  8.           ['helper''./utils/helper'], 
  9.           ['material-ui/DatePicker''../custom/DatePicker'], 
  10.           ['material-ui''material-ui-ie10'
  11.         ], 
  12.         extensions: ['.ts''.js''.jsx''.json'
  13.       } 
  14.     } 
  15.   } 
  16. }; 

Jest

我们可以在 package.json 中的 jest 配置项中添加 moduleNameMapper 属性:

  1. "jest": { 
  2.   "moduleNameMapper": { 
  3.     "^Config(.*)$""<rootDir>/src/config$1"
  4.     "^Components(.*)$""<rootDir>/src/components$1"
  5.     "^Ducks(.*)$""<rootDir>/src/ducks$1"
  6.     "^Shared(.*)$""<rootDir>/src/shared$1"
  7.     "^App(.*)$""<rootDir>/src$1" 

TypeScript

TypeScript 的配置类似于 VSCode,在 tsconfig.json 的 compilerOptions 选项中添加如下配置:

  1.   "baseUrl""."
  2.   "paths": { 
  3.     "c-apis/*": ["src/apis/*"], 
  4.     "c-models/*": ["src/models/*"], 
  5.     "c-stores/*": ["src/stores/*"], 
  6.     "c-utils/*": ["src/shared/*"
  7.   } 

 【本文是51CTO专栏作者“张梓雄 ”的原创文章,如需转载请通过51CTO与作者联系】

戳这里,看该作者更多好文

责任编辑:武晓燕 来源: 51CTO专栏
相关推荐

2011-06-08 13:20:56

Android ARM

2020-06-24 08:24:09

Web开发工具

2021-01-04 14:41:28

开发前端工具

2023-04-09 14:49:57

开发语言Kotlin

2020-11-19 10:05:03

Java

2021-02-05 23:23:55

Web开发工具

2017-05-08 16:17:54

前端开发工具

2011-11-22 13:44:18

Web

2021-10-19 09:44:22

开发测试工具

2010-05-28 13:38:29

Linux开发工具

2010-07-14 13:57:30

Perl开发工具

2011-08-25 13:58:25

LUA开发 工具安装

2020-06-24 09:38:17

前端开发工具

2019-06-11 09:00:00

阿里后端开发工具

2021-03-27 00:05:35

前端开发工具

2021-04-01 14:01:13

开发工具前端

2017-09-13 16:54:38

web

2021-11-15 09:00:00

Web开发工具

2010-03-15 18:39:00

Python程序员

2020-09-09 10:53:06

前端开发工具
点赞
收藏

51CTO技术栈公众号