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的执行速度
Jan 23 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
js实现简单模态框实例
Nov 16 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
探索node之事件循环的实现
Oct 30 Javascript
微信小程序自定义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设置一边执行一边输出结果的代码
2013/09/30 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python中强大的命令行库click入门教程
2016/12/26 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python实现SMTP邮件发送
2020/06/16 Python
通过实例解析python and和or使用方法
2020/11/14 Python
网页美工求职信范文
2014/04/17 职场文书
护林防火标语
2014/06/27 职场文书
科学发展观标语
2014/10/08 职场文书
党员思想汇报材料
2014/12/19 职场文书
党风廉正建设责任书
2015/01/29 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS