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 相关文章推荐
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
微信小程序实现购物车功能
Nov 18 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
Cakephp 执行主要流程
2010/03/24 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python 异常处理总结
2016/10/18 Python
django站点管理详解
2017/12/12 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Python I/O与进程的详细讲解
2019/03/08 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
三星英国官网:Samsung英国
2018/09/25 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
安全生产月宣传标语
2014/10/06 职场文书
工作失误检讨书
2015/01/26 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
centos8安装MongoDB的详细过程
2021/10/24 MongoDB