webpack公共组件引用路径简化小技巧

日常开发中，我们会常常把一些功能提取出来，包装成一个公共模块或者组件，供不同地方使用，但是随着项目不断变大，项目目录不断变深，我们引用公共组件的路径越来越长！

例如：引用一个公共模块

import Menu from '../../../../../components/Menu'; // 这里路径太深，很容易写错

我们该怎么优化尼？

解决方案1：使用webpack的resolve.alias属性

先配置webpack

module.exports = {
  ...
  resolve: {
    alias: {
      "@commModule": path.resolve(__dirname, "src/components/")
    }
  }
  ...
};

引用Menu模块

import Menu from '@commModule/Menu';

解决方案2：babel-plugin-module-resolver

配置.babelrc

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@commMdule": "./src/components"
      }
    }]
  ]
}

引用Menu模块

import Menu from '@commModule/Menu';

总结

或许这只是一个小优化，但是在实际场景中，能够大大的降低我们的维护成本，提高我们的生产效率！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack+vue中使用别名路径引用静态图片地址

    webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components')

  • webpack公共组件引用路径简化小技巧

    日常开发中,我们会常常把一些功能提取出来,包装成一个公共模块或者组件,供不同地方使用,但是随着项目不断变大,项目目录不断变深,我们引用公共组件的路径越来越长! 例如:引用一个公共模块 import Menu from '../../../../../components/Menu'; // 这里路径太深,很容易写错 我们该怎么优化尼? 解决方案1:使用webpack的resolve.alias属性 先配置webpack module.exports = { ... resolve: { alia

  • Postman 使用指南及小技巧

    Postman 使用指南及小技巧

    目录 一.什么是 Postman(前世今生) 二.使用变量 2.1 变量作用域适用于 Postman 中不同的场景 2.2 编辑全局和环境变量 2.3 编辑集合变量 2.4 使用系统内置动态变量 三.Postman 请求生命周期 3.1 在前置请求(pre-request script)中使用脚本 3.2 发送请求(request) 3.3 接收一个响应(response) 3.4 在测试(tests)中使用脚本 四.使用 Postman 抓包 4.1 开启抓包 4.2 抓包效果 五.使用代理

  • 详解webpack 多页面/入口支持&公共组件单独打包

    详解webpack 多页面/入口支持&公共组件单独打包

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • iOS组件依赖避免冲突的小技巧分享

    问题缘由 本文以 YBImageBrowser[1] 组件举例. YBImageBrowser 依赖了 SDWebImage,在使用 CocoaPods 集成到项目中时,可能会出现一些依赖冲突的问题,最近社区提了多个 Issues 并且在 Insights -> Traffic -> Popular content 中看到了此类问题很高的关注度,所以不得不着手解决. 严格的版本限制 一个开源组件的迭代过程中,保证上层接口的向下兼容就不错了.为了优化性能并且控制内存,YBImageBrowser

  • IDEA调试源码小技巧之辨别抽象类或接口多种实现类的正确路径

    IDEA调试源码小技巧之辨别抽象类或接口多种实现类的正确路径

    1. 打断点 直接在抽象类或者接口前打断点,直接debug模式就能自动跳入正确的实现类,如图: 这个document的解析,有5种可能,哪个才是正确的?直接在前面打断点,就能跳入正确的了 2. 发现正确实现类 到此这篇关于IDEA调试源码小技巧之辨别抽象类或接口多种实现类的正确路径的文章就介绍到这了,更多相关IDEA调试源码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • 编写简洁React组件的小技巧

    本文源于翻译文章 Simple tips for writing clean React components, 原文作者 Iskander Samatov 在这篇文章中,我们会回顾一些简单的技巧,它们将帮助我们编写更简洁的 React 组件,并且更好地扩展我们的项目. 避免使用扩展操作符传递 props 首先,让我们从一个应该避免的反模式开始.除非有明确的理由这样做,否则应该避免在组件树中使用扩展操作符传递props,比如:{ ...props }. 通过这种方式传递 props 确实可以更快

  • vue.js项目中实用的小技巧汇总

    vue.js项目中实用的小技巧汇总

    前言 Vue.js 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误 1.安装jQuery

  • Vue 使用中的小技巧

    在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1. 多图表resize事件去中心化 1.1 一般情况 有时候我们会遇到这样的场景,一个组件中有几个图表,在浏览器resize的时候我们希望图表也进行resize,因此我们会在父容器组件中写: mounted() { setTimeout(() => window.onresize = () => { this.$refs.cha

随机推荐