• 常见别名(懒人路径)设置


    工作中, 由于层级与代码拆分的的缘由, 经常会有引用本地文件。常常会遇到路径层级过深且书写繁琐的问题。这里对别名(又称懒人路径)进行一个总结。

    Webpack

    前端工程化项目中,最常使用的就是 webpack 了, webpack 中对别名做了很好的处理,相信大多数同学都是知道如何配置, 直接上代码

    // webpack.config.js
    const path = require('path')
    
    module.exports = {
        resolve: {
        // 路径别名, 懒癌福音
        alias: {
          app: path.join(__dirname, 'src/components')
        }
      }
    }
    

    这里使用 path 来帮助我们拼接一个绝对路径。

    通过对 webpack 别名设置后, 以前可能这么引用:

    import { Nav } from '../src/components'
    

    因为 app 是使用绝对路径进行拼接的, 所以现在无论在哪个文件里 都只需要这么引用, 不用担心层级问题

    import { Nav } from 'app/components'
    

    Javascript

    上面 webpack 的别名配置, 能帮助在很大程度我们解决了引用困难繁琐的问题。 但现在又有一种新的场景,webpack 的别名, 打包编译时 webpack 是识别的, 但我们的编辑器呢,例如 VScode ? 可能在以前我们在工作中找寻一个方法, 可以直接通过 Alt/option + click 直接 进入当前引入的源位置。可是在设置了 webpack 别名之后, 这个别名 webpack 识别,但编辑器是不识别的。 这里可以通过 jsconfig.json 来解决这个问题

    {
        "compilerOptions": {
            "baseUrl": ".",
        "paths": {
          "app/*": ["./src/components/*"]
        }
      },
      "exclude": ["node_modules"]
    }
    

    仅此配置后, 只要别名配置与 webpack 保持一致,那就可以愉快的点击路径 进入引用的源文件了。

    如果配置后并不能生效, 记得重启一下编辑器

    Babel

    通过上面配置后, 基本能解决绝大部分的场景。 但如果项目较为简单, 只使用了 babel 并没有使用 webpack ,这里便又出现一个新的场景, 需要对 babel 进行配置。

    babelwebpackVScode 还不同, 那两种情况只需要直接配置即可, babel 中需要使用插件来解决这个问题

    yarn add babel-plugin-module-resolver / npm i babel-plugin-module-resolver -S
    

    配置如下:

    // .babelrc.js
    const path = require('path')
    
    module.exports = {
      "plugins": [
        [
          "module-resolver",
          {
            "alias": {
              "app": path.join(__dirname, './src/components')
            }
          }
        ]
      ]
    }
    

    好了, 这三种方式基本上能帮助我们应对一切别名场景。

  • 相关阅读:
    leetcode
    leetcode: Path Sum II 迭代法
    leetcode : valid binary search tree
    地域划分 编程题
    n个整数中,找出尽可能多的数使他们组成一个等差数列,求最长等差数列的长度
    Nodejs 调试方法
    精心收集的48个JavaScript代码片段,仅需30秒就可理解
    React Native ref高级用法&&setNativeProps使用
    Git工作流指南:Gitflow工作流
    Git工作流指南:Pull Request工作流
  • 原文地址:https://www.cnblogs.com/vant850/p/13252814.html
Copyright © 2020-2023  润新知