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 工具函数学习资料
Apr 29 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
js切换光标示例代码
Oct 10 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
原生JavaScript实现随机点名表
Jan 14 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
基于文本的留言簿
2006/10/09 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
两款万能的php分页类
2015/11/12 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python 基础知识之字符串处理
2017/01/06 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Python基于execjs运行js过程解析
2020/11/27 Python
农行实习自我鉴定
2013/09/22 职场文书
报社实习生自荐信
2014/01/24 职场文书
师德师风建设方案
2014/05/08 职场文书
个人委托书如何写
2014/09/25 职场文书
商业用房租赁协议书
2014/10/13 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server