|
|
51CTO旗下网站
|
|
移动端
创建专栏

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

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

作者:佚名|2018-06-06 15:08

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

路径解析

随着需求的迭代与功能的完善,我们的项目也会愈发庞大而复杂,目录层级结构也会不断深化;以 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与作者联系】

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

【编辑推荐】

  1. 外媒速递:无服务器计算—为开发者提供的自由空间
  2. Web Bundler CheatSheet, 选择合适的构建打包工具
  3. 23款最佳免费安全工具
  4. 10款免费工具:敏捷开发运维(DevOps)的好帮手
  5. 外媒速递:十款DevOps自动化工具助你笑傲2018
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多