虽然春天的劲风,着实让我不太喜欢,但不得不说,春天是个好季节,俗话说 "一年之际在于春 ",春天是一年的开始,也是让人充满希望和幻想的季节。刚刚历经了寒冬的人们,开始在春天慢慢苏醒,他们慢慢的重拾自己的梦想,渐渐骨起斗志,一步步朝着自己的梦想出发,一点点靠近理想的终端。
日常开发中,我们会常常把一些功能提取出来,包装成一个公共模块或者组件,供不同地方使用,但是随着项目不断变大,项目目录不断变深,我们引用公共组件的路径越来越长!
例如:引用一个公共模块
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';
总结
或许这只是一个小优化,但是在实际场景中,能够大大的降低我们的维护成本,提高我们的生产效率!
本文webpack公共组件引用路径简化小技巧到此结束。只有品味了痛苦,才能珍视曾经忽略的快乐小编再次感谢大家对我们的支持!