Say Goodbye to '../' '../../' '../../../'

2023年11月19日 235次阅读 来源: 蒋继发

开辟 JavaScript 时，你有无遇到过如许的状况。
页面复用大批共通组件，这些共通组件大致都在同一个文件夹下。然则由于组件支解和文件夹层级较深的原因，你试试会写出👇如许的代码。

// some.js
import VodMediaPlayer from '../../../components/VodVideo/VodMediaPlayer'
import VideoInfo from '../../../components/VodVideo/VideoInfo'
import RecommendList from '../../../components/RecommendList/RecommendList'
import Comment from '../../../components/Comment/Comment'
import { get, mediaPath } from '../../../util/fetch'
import { API_VIDEO, API_CHANNEL } from '../../../util/constants'

你晓得本身在键盘上敲击 ../ ../../ ../../../ 时浪费了若干时候吗？

时候就是金钱。 ～名言

为了处置惩罚这类题目，主流的前端东西都给出了处置惩罚方案。
本文引见怎样运用 babel plugin 的处置惩罚方案。

正文

起首我们挑选 babel-plugin-module-resolver。

1. 装置

$ npm install --save-dev babel-plugin-module-resolver

2. 设置 .babelrc

{
  "presets": ["env", "react"],
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "components": "./src/components",
        "util": "./src/util"
      }
    }]
}

这时候你的代码能够修改成👇

// some.js
import VodMediaPlayer from 'components/VodVideo/VodMediaPlayer'
import VideoInfo from 'components/VodVideo/VideoInfo'
import RecommendList from 'components/RecommendList/RecommendList'
import Comment from 'components/Comment/Comment'
import { get, mediaPath } from 'util/fetch'
import { API_VIDEO, API_CHANNEL } from 'util/constants'

⚠️注重： 假如你运用了 eslint，这时候 eslint 会报错，由于它不能处置惩罚新的写法。

3. 增加对应的 eslint plugin

我们挑选 eslint-import-resolver-babel-module

$ npm install --save-dev eslint-plugin-import eslint-import-resolver-babel-module

设置 .eslintrc

"settings": {
  "import/resolver": {
    "babel-module": {}
  }
}

⚠️注重： 这时候 eslint 不会报错了， 然则你会发明你点击 import 背面的组件名， VSCode 不会自动跳转到组件定义。

4. 在项目根目录下增加 jsconfig.json 处置惩罚

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"],
      "util/*": ["src/util/*"],
      "locales/*": ["src/locales/*"]
    }
  }
}

到此为止，我们终究能够 Say Goodbye to '../' '../../' '../../../' 了。

参考

https://github.com/parcel-bun…
https://github.com/tleunen/ba…
https://code.visualstudio.com…

    原文作者：蒋继发
    原文地址: https://segmentfault.com/a/1190000016033668
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞