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 学习笔记(八)javascript对象
Apr 12 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
JavaScript实现星级评价效果
May 17 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
JavaScript RegExp 对象用法详解
Sep 24 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php无限极分类实现方法分析
2019/07/04 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中requests小技巧
2017/05/10 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python实现代码统计程序
2019/09/19 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
一句话工作感言
2014/03/01 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
公司请假条格式
2014/04/11 职场文书
大学生暑期实践报告
2015/07/13 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js