• 为什么别人能成为Leader而你不行?
  • 发布于 1个月前
  • 82 热度
    0 评论
  • 斗鱼
  • 0 粉丝 22 篇博客
  •   
遥想当年,哥入行之初,因为不会从零手写一个适合公司项目vue-cli脚手架,差点被leader劝退。

还记得那个时候,我还是个工作没几年的前端新人,在公司搭建vue项目也是从一个npm install vue-cli -g的命令行开始的。

傻瓜式操作,几条命令轻松搞定。

我觉得,官方提供的vue-cli脚手架很友好,不用想vue+webpack的工作流怎么搭建,vue-loader 和 css-module怎么配置,如何安装使用eslint和editorconfig等,就可以直接进入业务代码的开发阶段。

当时,我还是一个写业务代码的前端一线搬砖工。

直到有一次,公司有新项目,leader让我自己去搭建一个前端项目的工程,我一下傻眼了。

我承认,自己当时在前端工程化这方面功底比较差,之前这些在项目破土动工前的活儿,都是由leader亲自操刀的。

前端太难了!我该怎么办?

还好,求生欲很强的我,厚着脸皮去请教了leader,事后还请leader吃了火锅喝了酒。

经此事后,我开始不满足于一直写业务代码,我也想知道一个一个项目在破土动工前,前端leader是怎么搭建一个前端项目的工作流的,如何去手动配置一个具体项目的webpack打包文件,包括后期的SSR,服务端渲染。

那段「刨坑问底低头钻研」的日子,都成了我后来进阶为leader的资本。

很多人一直嚷嚷着前端进阶,我要摘掉初级前端的帽子,我要当leader... 殊不知,静静地摆在你编辑器里面的项目代码,都是你提升自己内功的砝码,也是初级前端和中级前端的区别所在。

来个灵魂拷问:你现在能给你们前端小组成员,从头到尾讲述清楚整个项目的来龙去脉,所用技术栈有哪些,以及各个工程目录的关联关系吗?

初级前端只会在leader安排下的一个模块里写点业务代码,而不用去管前端工程的问题,这些问题都被前端leader搞定了,你只需调用他写好的命令或者插件即可。

中级前端或者更进阶者就有统筹全局的能力,类似于文章开头说的,能手动创建一个和公司项目需求深度定制的vue脚手架,而不再依赖于官方提供的vue-cli,一方面自己定制的脚手架哪出了问题自己心里清楚,从而也能培养自己前端架构的能力,另一方面这也是月薪10K与20K的技术差距。

当然,如果你平时都是直接套用vue-cli,而你的领导某一天要求你将webpack的版本从3升级到最新的大版本4,你会不会一脸懵逼呢?

举个例子:在webpack4.0中,如何使用extract-text-webpack-plugin配置css单独分离打包,以及如何解决在升级过程中碰到的一些坑?如果你没有亲手升级过webpack4,你根本不会发现这些问题,例如extract-text-webpack-plugin的报错:
(node:12712) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    E:\***\myproject\webpack-vue-elementUi\node_modules\webpack\lib\Chunk.js:460
                    throw new Error(
                    ^
    
    Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
        at Chunk.get (E:\***\myproject\webpack-vue-elementUi\node_modules\webpack\lib\Chunk.js:460:9)
        at E:\***\myproject\webpack-vue-elementUi\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
        at Array.forEach (<anonymous>)
        at E:\***\myproject\webpack-vue-elementUi\node_modules\extract-text-webpack-plugin\dist\index.js:171:18

这个问题的解决办法,当时在百度上还搜不到答案,只能是依靠平时阅读官方文档、技术社区等寻找解决之道。后来经过排查你会发现是由于extract-text-webpack-plugin目前还没有webpack4版本。可以使用该方式npm install extract-text-webpack-plugin@next解决。

这就是硬实力的一种体现,在公司里技术的高低,体现于公司项目中碰到的难以解决的bug的解决能力。

你可以看看平时在公司里谁解决的bug多,一般不是太难的bug都是前端小组的成员去解决,比较难的bug大多数情况下是前端小组的leader去解决的。

这种硬实力的体现,折射出他为何是leader,你为何是被管理者,同样的岗位,放你上去,你不一定能解决掉项目中碰到的问题,而他能。

所以,兄弟们,人家之所以是leader,是因为人家有高你一筹的技能,而这恰恰是你现阶段所缺少的。

俗话说,不想当leader的搬砖工不是一个好司机。所以,哥在这里给你们留一个任务:观察你们公司的leader,平时都在忙些什么?

心理学上讲,想成为什么样的人,你就要和什么样的人在一起,去观察他,去向他学习,最后你便会成为像他那样的人。

从零手写一个vue-cli脚手架,是我前端路上的转折点。

之后,哥触类旁通,稳扎稳打,凭借着颜值和人品,拿下了leader这个角色,这可是 dream job 啊!!!

用户评论