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

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

路径解析

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

import React from react; import {  connect } from react-redux; import {  someConstant } from ./../../config/constants; import MyComponent from ./../../../components/MyComponent; import {  myActionCreator } from ./../../../ducks/someReducer; 

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

import React from react; import {  connect } from react-redux; import {  someConstant } from Config/constants; import MyComponent from Components/MyComponent; import {  myActionCreator } from Ducks/someReducer; 

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

Webpack

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

module.resolve = {    alias: {      Config: path.resolve(__dirname, .., src, config),     Components: path.resolve(__dirname, .., src, components),     Ducks: path.resolve(__dirname, .., src, ducks),     Shared: path.resolve(__dirname, .., src, shared),     App: path.join(__dirname, .., src)   } }; 

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

{    "compilerOptions": {      "target": "es2017",     "allowSyntheticDefaultImports": false,     "baseUrl": "./",     "paths": {        "Config/*": ["src/config/*"],       "Components/*": ["src/components/*"],       "Ducks/*": ["src/ducks/*"],       "Shared/*": ["src/shared/*"],       "App/*": ["src/*"]     }   },   "exclude": ["node_modules", "dist"] } 

ESLint

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

--- settings:   import/resolver: webpack  # take all defaults 

或者指定文件名：

--- settings:   import/resolver:     webpack:       config: webpack.dev.config.js       config-index: 1   # optional, take the config at index 1 

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

// .eslintrc.js module.exports = {    settings: {      import/resolver: {        alias: {          map: [           [babel-polyfill, babel-polyfill/dist/polyfill.min.js],           [helper, ./utils/helper],           [material-ui/DatePicker, ../custom/DatePicker],           [material-ui, material-ui-ie10]         ],         extensions: [.ts, .js, .jsx, .json]       }     }   } }; 

Jest

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

"jest": {    "moduleNameMapper": {      "^Config(.*)$": "<rootDir>/src/config$1",     "^Components(.*)$": "<rootDir>/src/components$1",     "^Ducks(.*)$": "<rootDir>/src/ducks$1",     "^Shared(.*)$": "<rootDir>/src/shared$1",     "^App(.*)$": "<rootDir>/src$1" } 

TypeScript

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

{    "baseUrl": ".",   "paths": {      "c-apis/*": ["src/apis/*"],     "c-models/*": ["src/models/*"],     "c-stores/*": ["src/stores/*"],     "c-utils/*": ["src/shared/*"]   } } 

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

戳这里，服务器租用看该作者更多好文

很赞哦!（824）