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与函数式编程解释
Apr 27 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
浅谈javascript回调函数
Dec 07 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
js实现图片360度旋转
Jan 22 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python生成带有表格的图片实例
2019/02/03 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
环卫工人节活动总结
2014/08/29 职场文书
作风转变心得体会
2014/09/02 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL