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


Posted in Javascript onJune 15, 2018

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

例如:引用一个公共模块

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';

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
JS实现标签页切换效果
May 04 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
Vue-Router的使用方法
Sep 05 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
Vue实现简单计算器
Jan 20 Vue.js
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 #Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 #Javascript
详解vue组件开发脚手架
Jun 15 #Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 #Javascript
vue cli 3.0 使用全过程解析
Jun 14 #Javascript
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 #Javascript
You might like
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
JS实现数组的增删改查操作示例
2018/08/29 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
讲解Python中的递归函数
2015/04/27 Python
python运行其他程序的实现方法
2017/07/14 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Python中的面向接口编程示例详解
2021/01/17 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
年终自我鉴定
2013/10/09 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
骨干教师个人总结
2015/02/11 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js