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 相关文章推荐
jquery模拟按下回车实现代码
Sep 20 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
Less 安装及基本用法
May 05 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
Vue自定义指令写法与个人理解
Feb 09 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
完美解决PHP中文乱码
2009/11/26 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
javascript求日期差的方法
2016/03/02 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
贫困证明书范文
2015/06/16 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS