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

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

路径解析

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

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

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

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

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

Webpack

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

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

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

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

ESLint

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

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

或者指定文件名：

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

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

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

Jest

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

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

TypeScript

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

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

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

当前题目：前端常用开发工具的路径解析配置
网页URL：http://www.shufengxianlan.com/qtweb/news30/466630.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

企业建站知识

行业网站建设

ssl数字证书　　 　营销型网站　　 　上海济桢教育　　 　成都服务器租用　　 　移动网站建设　　 　小程序开发　　 　成都多线机房　　 　成都网站设计　　 　网站建设　　 　成都光华机房　　 　成都申请ssl证书　　 　吉安网站建设　　 　网站改版　　 　网络营销公司　　 　成都网站设计　　 　软文推广　　 　成都网站维护　　 　郫县封阳台　　 　成都定制网站　　 　梅州网站建设