专栏首页某熊的全栈之路前端常用开发工具的路径解析配置

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

题注:本文是 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';

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

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

开发工具的支持是不可避免地因素,值得高兴的是 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/*"]
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用truffle开发以太坊Dapp

      上一篇我们介绍了使用web3.js与以太坊智能合约交互,其中介绍了合约的编译、部署、执行等操作,但是很明显,如果要开发dapp,仅仅使用web3.js是不够...

    JouyPub
  • 快应用开发教程【02】--项目配置教程

    每个应用都要有专属的名称,图标等,这些信息都需要在manifest.json文件中配置;详细信息请参考文档:manifest文件

    先知先觉
  • 纯js实现点击一个事件后,触发另外一个事件的方法

    我们在日常的开发中,经常会用到,当我点击一个按钮的click事件后,我想触发另一个按钮的click事件。 这时我们该怎么做...

    业余草
  • js封装好的模仿qq消息弹窗代码

    在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。

    业余草
  • HTML5 Canvas API详解

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — ...

    业余草
  • 微信小程序开发--【Hello World 及代码结构】(二)

    通过上一篇我们已经完成了注册及开发环境的搭建,今天我们来开发我们的第一个微信小程序 微信小程序开发注册流程

    先知先觉
  • zepto的构造器$

    fragmentRE是一个匹配普通标签<xxx>的表达式,关键是zepto.fragment()函数。

    菜的黑人牙膏
  • 【React Native 安卓开发】----(mac下开发环境配置)【第一篇】

    Android Studio安装相信大家都会就忽落了。 SDK配置详见博客: http://blog.csdn.net/github_33304260/...

    先知先觉
  • JavaScript设计模式 观察者模式

    观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时...

    菜的黑人牙膏
  • Koa框架教程,Koa框架开发指南,Koa框架中文使用手册,Koa框架中文文档

    koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 ge...

    业余草

扫码关注云+社区

领取腾讯云代金券