寒水寺一禅

寒水寺一禅 查看完整档案

西安编辑  |  填写毕业院校暂无  |  前端工程师 编辑 libbgit.github.io/person 编辑
编辑

若确切地知道现在,就能预见未来

个人动态

寒水寺一禅 赞了文章 · 1月18日

🎉 Element UI for Vue 3.0 来了!

第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 🎉 ~

2016 年 3 月 13 日 Element 悄然诞生,经历了 4 年的风雨洗礼,我们从一个饿了么内部业务组件库成长为 Vue 生态里最流行的 UI 组件库之一。

截至本文撰写时,Element 已获得 48200 Github Star, NPM 下载量 95 万次/每月的可喜成绩。感谢超过 530 名社区贡献者的参与维护,和我们一同完成了 4400 次 commit 的更新迭代。

Element 40000 star
*Element 开发团队 40000 Github Star 庆祝会

Element Plus for Vue 3.0

2020 年,随着 Vue 3.0 不断完善和发布,我们也紧张投入到 Element 对 Vue 3.0 的升级适配工作中。历经 6 个月共计 23 个 alpha 版本的迭代,终于,在今天, Element Plus for Vue 3.0 Beta 版本正式发布 🎊 !

https://github.com/element-plus/element-plus

Vue 3.0 的大版本升级,对生态组件库来说也是一次丢掉历史包袱前行的好机会,我们大刀阔斧对 Element 进行了一次深度重构。

Element Plus For Vue 3

Element Plus for Vue 3.0 是一个使用 TypeScript + Composition API 重构的全新项目。我们几乎重写了每一行 Element 的代码,用最 Vue 3 的方式呈现了最完美的 Element,主要有:

  • 使用 TypeScript 开发,提供完整的类型定义文件
  • 使用 Vue 3.0 Composition API 降低耦合,简化逻辑
  • 使用 Vue 3.0 Teleport 新特性重构挂载类组件
  • 使用 Lerna 维护和管理项目
  • 使用更轻量更通用的时间日期解决方案 Day.js
  • 升级适配 popperjs, async-validator 等核心依赖
  • 完善 52 种国际化语言支持

除此以外,还有:

  • 全新的视觉*
  • 优化的组件 API
  • 更多自定义选项
  • 更加详尽友好的文档

Q:Element Plus 和 Element UI 是什么关系? 为什么又一个新项目?

正如 vue-next 之于 vue,一次 100% 的重构虽然解决了很多历史遗留问题,但也不可避免的引入一些新的 bug 和问题,而独立的 issue 和 pr 区可以减少大家使用和反馈的心智成本,也能更加方便我们定位问题,并行维护迭代。

Element will stay with Vue 2.x

For Vue 3.0, we recommend using Element Plus from the same team

具体可以参考 Element 的 README https://github.com/ElemeFE/element/blob/dev/README.md

Q: 老 Element 项目可以平滑升级到 Vue 3.0 + Element Plus 吗?

由于 Vue 3.0 升级引入了部分 API 的调整,老项目的升级不可避免的要做些许改动。但我们力争把变更内容做到可控,只需要很少的调整就能完成项目升级。在今后 Vue 3.0 的项目里,还是熟悉的 Element 的配方和味道。

Q: Element UI 还会维护吗?

当然会!(而且一直在正常迭代发布呀 ヽ(✿゚▽゚)ノ)

每每看到社区类似的担忧,对我们都是一种鞭策。作为一个负责任的开源项目,必然不会辜负大家的期待。随着用户的增多,肩上的压力也越来越大,希望大家使用了 Element 能真正为项目开发减负提效,这样我们多加班,大家早下班,想到这,感觉胸前的红领巾更鲜艳了😘。

开始体验吧

有很多方式可以体验 Element Plus for Vue 3.0

  • 手动安装 npm install element-plus ,详见官网安装指南
  • 🥳 尝鲜时下最炫酷的Vite 打包脚手架

What's Next for Element Plus?

  • 一次重大视觉更新
  • 2 个全新组件紧张研发中
  • 访问速度更快,功能更强大的官方网站

喜欢 Element Plus 吗?来点个 Star ❤️ 支持鼓励我们一下吧 ~

感谢大家 4 年以来对 Element 的关注,是你们的支持让 Element 不断完善,力争做到最好。我们也会不忘开源初心,反哺社区,未来将对社区更加开放,非常欢迎热爱开源的你来和我们一起完善 Element Plus —— 赠人玫瑰,手有余香,开源社区的维护,不仅仅是靠一个团队,一个公司,我们相信是靠所有热爱开源,拥有开源精神,热衷于分享和交流的朋友们。

查看原文

赞 18 收藏 4 评论 1

寒水寺一禅 发布了文章 · 1月14日

JavaScript高级程序设计(第4版)——红宝书2020版

大名鼎鼎的红宝书,于2012年发布后,8年来,再也没有发布过。直到今年,迎来了第四版,这个版本中包含大量的ES新语法,包括最新的ES2019。所以果断买了它,先尝尝鲜。

左手犀牛书,右手红宝书。我离秃头更进一步了。
image.png
image.png
image.png
image.png

随书下载中,还有实例源码。很实用
image.png

想要的同学,可以加我私发,vx: 824610286

查看原文

赞 1 收藏 1 评论 0

寒水寺一禅 发布了文章 · 2020-12-10

前端设置任何颜色作为主题色(不用预先指定固定几种),吐血整理

项目中,本来要提供2个主题,一个深色,一个浅色,本来想利用scss来实现,但是觉得,如果后期,再有3个、4个呢?感觉这种提供几种固定主题的方案,有些不太灵活,正好看到element-ui中主题,可以随意指定
image.png
image.png

于是也,准备实现一个随时可以定制的主题功能。

一、参考element-ui中的主题切换

查看element-ui在切换主题时发送的请求
image.png
image.png
image.png
发现,它其实是通过把前端选择的主题色,当做参数,然后发送给后端,然后让后端生成一个新的css文件,再发给前端。

然后再通过js,将css设置到head中的style上,完成主题切换。
image.png

不过需要注意:
返回的css文件,不仅仅是简单的将颜色替换为我们刚才选择的那个主题色,还需要进行一些“颜色的计算”。

image
如图所示,button在hover时,会在主题色上有个减淡的效果。

也就是说,对于我们选择的任何颜色,都必须计算出一个减淡的颜色值,赋值给那些有hover的class。

我知道大家会问,颜色我怎么计算?比如白色 #ffff,我如何进行加减乘除?

二、使用color库,对主题色进行计算

这里有个神器。名称叫做 Color, 可以在npm中搜索,并安装它。

>npm install color

详细用法可以查看npm介绍,这里不赘述。

那么又有一个问题来了。我知道怎么操作它,但是计算规则是什么?

这个确实不好找,element-ui后端将主题色简单的规则,我们也无从得知。

然而,经过我一番尝试,发现公式很简单:
将任意的主题色和“不同程度的白色”进行“混合”得到的。

image.png

如button的hover,正好是将主题色#8F13ED与0.2程度的白色(1就是完全白,0就是全黑)进行混合而得到。

let primaryColor = "#8F13ED";
Color(primaryColor)
  .mix(Color("white"), 0.2)
  .hex()      //#A542F1  

image.png

顺着这个思路,你可以对照element-ui中某一个主题,可以将所有的规则都找出来,只不过混合程度不一样,有的是0.9,或者0.92,或者0.8等等。

现在解决了如何计算得到所有与主题色相关的颜色,那么接下来解决发送请求,后端将这个css文件返回给前端。

不过,我本着前端得事情,前端干的原则。这个css文件不需要后端返回,而是前端自己生成。

先将模板主题文件下载下来。
image.png

然后复制到js中。

这是我已经构造好的文件,由于比较大,所以放到百度云下面

 链接: https://pan.baidu.com/s/1PpAMjl4dF7zBrvv5zOP2Gg 
 提取码: gegh

到此为止,已经解决了,从选择主题色,到生成对应主题色的css文件的流程,此后,当切换任意颜色时。所有element的组件都会变。但也仅仅是element的组件会变,你自定义的样式和组件,并不会变。

那么我们自定义的组件是如何拿到我们设置的主题色,以及通过主题色计算出来的相关颜色呢?

可以使用css变量。

三、使用css变量

关于什么是css变量,以及怎么用。可以参考阮一峰的这篇文章
CSS 变量教程

而且它的兼容性,也非常好。
image.png

简而言之,就是定义一个,以"--"开头的变量,这样浏览器就会将它当做一个css的变量来进行处理,然后使用var()引用这个变量。

如:

--hover-color:red;    //定义变量
background-color: val(--hover-color)   //通过css内置函数var,使用变量

打开刚才从百度网盘下载的index.js。在最后面加上

  //设置全局css变量
  jquery("body").attr(
    "style",
    `--primary-color:${primaryColor};
    --success-color:${successColor};
    --warning-color:${warningColor};
    --danger-color:${dangerColor}`
  );

打开浏览器控制台,可以看到变量已经生效。
image.png

之后,你在组件的任何位置想使用 定义好的全局变量,都是没问题的

background-color: var(--primary-color);

image.png

如果觉得不错就给个赞吧,你的鼓励是我前进的动力(相信你看完这篇文章,你会啪的一下站起来,很快啊)

查看原文

赞 41 收藏 28 评论 2

寒水寺一禅 收藏了文章 · 2020-10-26

浅谈怎样系统的准备前端面试

image.png

前言

创业梦碎,回归现实,7 月底毅然裸辞,苦战两个月,拿到了美团和字节跳动的 offer,这算是从业以来第一次真正意义的面试,遇到蛮多问题,比如一开始具体的面试过程我都不懂,基本一直是摸着石头过河,所以结合我的经历和前人经验,总结一下我认为还比较系统科学的面试大纲分享给大家,希望大家在系统的准备之后,都能找到自己满意的工作。

一、知识准备

1. 知识体系

知识体系是重中之重,优秀的开发者很多都有维护自身知识体系的习惯,建立知识体系能帮助认知知识全貌及迅速找到知识的关联,就像对碎片化的知识做了索引,无论工作还是面试中碰到的问题,能很快对号入座,举一反三,哪怕是不熟悉的知识点,也可以使用其他同体系的知识进行关联解释,知识体系可以帮助你尽快了解自己,帮助你查漏补缺,让你能够把宝贵的时间聚焦于自己的薄弱项。

如果还没有自己的知识体系,那就赶快行动起来吧,这里列出一些参考资料帮助你快速行动:

2. 时间分配

梳理好知识体系之后,接下来就是制定一个合理的学习计划了,这一步需要你根据自己的个人时间进行安排(我就是时间安排不了一狠心就裸辞了,后面压力巨大),按照知识体系中标记的优先级进行系统的学习,总的时间根据自身情况,建议 1 ~ 3 个月即可,太长时间可能容易遗忘前面学习的知识。

针对不同模块,时间安排也有所不同,我列举一下我自己的安排以供参考:

  • 基础知识 40%
  • 项目与业务 20%
  • 算法与数据结构 20%
  • 设计思想与工程化 10%
  • 框架与原理 10%

3. 整理算法

这里把算法单独拿出来,是因为近年来在大厂的面试中对数据结构和算法的考察越来越重视,不管是前端还是后端,首先我们是工程师,我们日常工作就是写程序的,程序 = 数据结构 + 算法,所以算法和数据结构的学习是很有必要的,虽然对于前端岗位的算法要求可能不会那么高,但是基本的递归、遍历、链表的操作、栈与队列的常见算法还是要会的。每天学习两三题,两个月后,你不会后悔的。

推荐一些社区内很不错的算法学习资料和经验:

喜欢付费课程的话,比较不错的有:

  • 慕课网 bobo 老师的《算法与数据结构体系课》
  • 极客时间 覃超 老师的《算法面试通关40讲》

4. 整理面试题

这一步不是让大家去只刷面试题,而是熟悉目前实际面试中常见的考察方式和知识点,做到心中有数,也可以用来自查及完善知识体系。可以搜集整理近两年来一线公司的面试题,做成笔记,你会发现面试题实际问的大同小异,只是考察的内容和形式有不同的目的性。提前熟悉,上场的时候才不会慌张。

推荐资料:

5. 常见功能的手写实现

这块几乎是必考的,比如:深拷贝、事件总线、es5 继承,以及最近很火的手写 Promise 实现,这些手写功能不仅考察了面试者的编码能力也考察了对原理和规范的掌握程度。

虽然实际面试过程,面试官可能不会问的特别细节,比如让你实现一个完整的 Promise,但是我们自己学习这些手写功能的时候,不能浅尝辄止,需要考虑使用场景、错误处理、规范等细节的问题,千万不要背代码,不然手写代码一时爽,深挖细节火葬场。

笔者自己粗略的总结了一些前端面试常见的手写功能,供大家参考;

6. 项目实战

这部分是社招必考点,对自己负责或参与的项目,一定要深挖,要提炼出「难点」「痛点」「亮点」以及「解决方案」,更要体现出自己的「思考」和做出的「努力」,对应于 「问题 - 思考 - 解决 - 成果」这样的一个过程,是大厂很看重的能力,希望大家对于自己的参与的项目都能参考这个流程进行思考总结。

如果没有很丰富的项目经验,也可以多研究社区内技术大佬们的「项目经验」来获得,但一定要研究透彻,看过不等于会,不然面试问到只会坑了自己。

7. 执行学习计划

按照梳理的「知识体系」、「整理算法」、以及「整理面试题」,结合「时间分配」、给自己制定一个合适的学习计划,然后坚定认真的去执行它。

二、简历准备

1. 参考目录

  • 【基本信息】不写无用的个人信息,比如:照片、籍贯、性别、地址、身高等;
  • 【技术技能】对「了解、熟练掌握、精通」这类词有概念,不要随便用精通;
  • 【项目经历】不写对求职无用项目经历、做的最好的项目 2 ~ 3 个即可,有数据支撑;
  • 【工作经历】简略概述名称、在职时间、职位以及主要负责业务,也可以和项目经历结合起来写;
  • 【教育背景】名称、时间等简要信息,普通院校建议放在底部即可,名校可以放在顶部;

    参考简历模板:链接: https://pan.baidu.com/s/1I-9U... 提取码: gkxw

2. 项目经历

简历中最难写的应该就是「项目经历」了,这块也是最重要的,是面试官考察你的依据,也是你用来引导面试官提问的工具,项目经历的总结,要有数据思维,不能泛泛而谈,一般按照 STAR 法则进行描述,按照:情境(situation)、目标(target)、行动(action)、结果(result)四项对工作做一个精简描述,例如:

  • 项目简介以及在 xx 项目中担任前端负责人
  • 负责了 xxx 工作,实现什么目标
  • 通过 xxx 方案解决了 xxx 问题;使 xxx 提升了 50%
  • 总结了 xxx 解决方案

3. 注意事项

  • 【突出亮点】如开源项目、大厂背景、社区影响力、知名项目、个人博客、技术亮点等;
  • 【对症下药】针对不同公司职位,可以针对性的调整简历内容,准备多份简历;
  • 【格式排版】PDF 格式,最好一页,最多不超过两页,像对待毕业论文一样去检查排版、错别字、标点符号、措辞;
  • 【文件命名】姓名_职位_手机号.pdf(学历有优势的可以加上最高学历院校);

4. 投递简历

  • 【筛选公司】相关因素:平台大小、发展前景、公司距离、个人喜好等;
  • 【了解公司】通过网络、社区、认识的内部员工去了解面试的具体流程、周期、注意事项等;
  • 【投递顺序】面试周期短的可以推迟,面试周期长的可以先面试,保证 offer 发放之间的时间跨度不会太长,便于集中对比选择;最想去的公司可以最后面试,这时已充分热身,甚至拿了 offer,心态方面也会更加从容;
  • 【内推优先】优先找人内推,社区内有很多小伙伴愿意帮忙的;

三、面试准备

1. 自我介绍

面试官对你的基本信息都已知晓,所以这一步最好结合应聘职位直奔亮点进行简要概述,做了哪些亮点项目遇到了什么难点如何解决的项目有什么收获给团队或公司带来了哪些成果,按照这个方式去吸引面试官,同时这也是我们掌握主动权的方法,面试官喜欢根据我们表述的内容进行展开,这样由一段精心设计的自我介绍开始,进而引导面试官和你交流,这会让面试官的工作开展的很舒服。

注意自我介绍不必涉及过多的技术细节阐述,一是这些技术细节可能面试官不一定涉猎,导致面试官只能从其他方面寻找切入点让你陷入被动,二是占用过多时间,所以简要概述要点即可,随后面试官会根据这些点和你展开沟通的,这时再详细阐述不迟。

2. 面试过程

大厂的面试多为四轮,整个过程因人因公司而异,下面介绍一些常见的面试过程与注意事项:

一面

一般是你应聘职位的平级的骨干同事,是入职后和你一起并肩作战的伙伴,这一面一般也是最难的,会从多个方面考察你能不能胜任这份工作,侧重于学习能力、沟通能力、基础知识掌握程度、总结与思考、编码能力等;

这一面要特别注意编程题,如果遇到原题,不要太激动,面试官会从其他方面再进一步考察你,所以多思考一点,这也是上文说的,一定不要背题,不然一问就露馅;

遇到不会的知识,也不要太紧张,先尝试暴力解,然后逐步优化,也可以请面试官给予提示,如果能在面试中解决一个不会的问题,那一定会让面试官给你加分的;

二面

一般是团队骨干或直属 leader,这一面是对一面的延伸,除了基础知识之外,面试官还会从技术选型、架构、解决方案等方面提问,考察你对技术细节、项目优化、整体方案等方面的思考;

三面

三面一般是所属团队的 leader,这一面的技术细节考察你的不会太多,更多的是你对工作中涉及到的业务、产品、技术的思考,职业的规划与个人发展,以及一些职场软技能,常见问题举例:

  • 项目中的角色、承担了哪些任务、遇到了哪些难点?怎么克服的?
  • 和其他技术选型或者产品项目的对比有什么优劣?
  • 团队怎么协作与分工的?
  • 给自己的技术能力做一个评价
  • 做了哪些提升团队的工作?
  • 公司产品这样的?是否有竞争力?怎么盈利的?
  • 你的个人职业规划?

四面

四面一般是 HR 面,这一面,尽力别说太多题外话,因为言多必失,保持积极乐观、礼貌友好的态度,当面试官问你为什么离职时,哪怕你上家公司老板和你打过架,也不要抱怨说出来。常见问题举例:

  • 为什么从上家公司离职?(注意积极向上)
  • 希望找一个怎样的工作,职业规划呢?(重发展,少谈钱)
  • 谈谈自己最大的优点?(不要编,结合实际说就好,大家都有的,比如:专注、团队精神、技术热情与钻研精神、沟通能力、深度思考等)
  • 谈谈自己最大的缺点?(和工作相关,又可以通过努力改变的点,比如:过于局限技术细节而忽视产品业务的重要性和理解,导致开发过程受阻,现在会积极参与产品业务的早起阶段,加强对业务的理解)
  • 方便透露手上都有哪些 offer 了吗?(按实际情况说即可,好的 offer 可以突出一下,不好的,可以不说)
  • 在 B 公司和我们之间,你怎么考虑的呢?(肯定选你啦)

3. 面试官:“你有什么想问我的吗?”

这个问题一般每一面都会遇到的,提问是面试中我们能够主动“索取”的环节,所以一定不要浪费这个机会,一些 leader 的回答还会带给你很多技术之外的思考与经验,让你受益良多,一定注意,不要问和待遇相关的问题,最后谈 offer 的时候再去问。

下面给出一些提问示例供参考:

  • 一面:面试官一般是你的平级同事,可以多去了解实际的工作内容,便于后续对比 offer,例如:团队业务、日常工作、技术栈、协作、技术分析等
  • 二面:面试官一般是团队骨干或直属 leader,可以多去了解业务和产品的规划、技术建设、对应聘职位的定位与期待等;
  • 三面:面试官一般是部门 leader,这一步可以多了解技术之外的知识,比如面试官自己的成长经验、技术之外的能力、职位发展路线等;
  • Hr 面:这一步可以多去了解公司本身相关的事,比如:你在公司工作的最大的感受是什么?晋升机制是怎样的?等等

4. 面试复盘

面试也是一个特别好的学习过程,能利用这个机会和其他团队的优秀的人沟通技术、交流心得、检验能力、了解优秀团队业务和产品,无论最后结果怎样,都值得好好总结下来。

  • 【记录】每轮面试结束后,尽量详细记录整个过程,最好录音,方便分析自己的表现
  • 【分析】按照自己的掌握程度对面试问题进行分类统计,分析沟通过程以及自己的表现
  • 【补强】一知半解的问题优先复习掌握,不会的问题要去大致了解一下,如果没有时间掌握,可以暂时忽略
  • 【总结】分析补强之后,可以总结成文,也可以分享给社区的小伙伴

五、Offer

当面试通过以后,你就要着手开始准备最后的 offer 沟通了,这一步,你要结合新公司的薪资构成,职位的薪资范围,自己估算涨幅后的年薪总包、社区了解的信息、公司发展前景、个人心里预期等去设定一个自己的薪资底线。

1. 年薪总包,是你在上家公司的税前年度总收入:『月薪 * 12 + 奖金 + 其他』,会要求银行流水进行证明,新公司会参考进行定薪,特殊情况可以主动说明,上一家公司的薪资知识参考,但也不是决定因素的。

2. 薪资谈判,这一步可以说是最考验沟通能力的环节了,这里提供一些信息:

个人实力 / 公司水平优秀公司普通公司
个人实力优秀保持底线、冲击高薪没有底线、必须高薪
个人实力普通降低底线、学习为重保持底线、冲击高薪
  • 薪资一般会在之前总包的基础上提高 30% ~ 50%;
  • 实力优秀且入职优秀公司,翻倍不是不可能;
  • 有些公司超过 50% 涨幅需要走特批,要求你承诺入职才会给你申请,这个说明一是公司对你认可,二是公司希望你尽快入职,所以如果公司不错,可以好好考虑一下;
  • HR 询问薪资预期时,可以基于心里底线和职位薪资范围向上多要一些,大大方方的沟通即可,没有知乎上说的那么多戏,与其说 HR 压价,倒不如说 HR 是防止候选人狮子大开口,只要薪资的提升在一个合理的范围,谈薪还是比较简单的。
  • HR 询问薪资时,一般还会问你都拿到了哪些 offer 了,如果你手上有比较不错的 offer 可以说一下,可以帮助 HR 更加确定你是一个优秀的候选人,薪资说不定还可以获得一个提升,但是一定不要为了提价胡编乱造 offer,诚信是本;

3. 何时入职,这一步,HR 都会问你何时能入职,这个结合你的当前工作和后续的面试计划,可以推迟入职日期,但是不宜太久,后续如果不能入职,一定要尽早通知 HR,要尊重别人的工作与付出,礼貌说明原因即可,别让人家等太久;

4. offer 对比,简单来说:有目标向前看,没目标向钱看,薪资很重要,但是技术人的职业发展更重要,而且大的平台在薪资上也不会让你吃亏;

六、注意事项

  • 不要裸辞,不要裸辞,不要裸辞;
  • 尽量 15 号之后办理离职,下个月的 15 号之前入职,这样能保证你的五险一金不断缴,平滑过度
  • 上家公司签的离职证明日期,不要和新公司的入职日期有重叠,所以拿到 offer 后,要留出时间先把当前工作的离职手续办完;
  • 注意社交礼仪,IT 行业虽然没那么多繁文缛节,但是基本的礼节不能丢,着装得体整洁、不要迟到、进门敲门、出门关门、等;
  • 有 offer,心不慌,可以先把还不错的 offer 留着,再去冲击大厂;
  • 面试是七分实力三分运气,不同的面试侧重点也会不同,所以不要因为某一两次面试受挫就丢失信心,及时总结;
  • 乐观积极、保持诚信、杜绝欺骗、避免负面情绪;
  • 不抱怨同事、不抱怨上家公司;

七、扯点别的

感谢一下 @ssh_晨曦时梦见兮 给我内推,给我看简历,给我建议,一句:“我觉得你的简历还不错”,给了我很大信心,和晨曦开玩笑说:“自从遇到你好像所有的面试都顺利多了,争取做你同事”,最后虽然不在一个部门,也算是得偿所愿成了同事,就等面基吃饭啦。

感谢一下 @狼叔 * 阿里巴巴,和狼叔都有着一段困难的创业公司经历,在我辞职之后一直走不出内心对未来迷茫以及对过去痛心的情况下,我主动联系了狼叔,对于我的现状和规划,狼叔谈了自己的看法,给了建议,鼓励我:“有目标向前看,没目标向钱看,现在都还不晚,加油吧”。

最后手握 offer 后,甚至有点做梦的感觉,一路走来,一直感觉迷茫与无助,直到最后严重怀疑自己,但离职的这段时间,有不少朋友经常鼓励我:“自信点,你还不错,加油!”,也一直帮我找内推,我觉得没有这些朋友,我心态可能没那么快恢复过来,真的非常感谢他们。

稳定之后,我现在除了做好工作以外,还想做的一件事就是也试着去帮助一些我能帮助的人,也希望有机会鼓励他们:“自信点,你很棒,加油!”

八、说在最后

文章主要对面试的核心流程与准备工作做了一个大纲性的概述,重点在于对面试的一个整体的审视以及各个环节的重点,所以肯定有很多细节没有顾及到,如有疑问或者建议也欢迎留言一起交流讨论,也欢迎联系我,找内推、聊简历、聊技术、侃大山。

邮箱:weboying@gmail.com
公众号:iboying

image.png

查看原文

寒水寺一禅 收藏了文章 · 2020-10-18

vue.js进入了vue3 RC阶段,正确姿势霸气迎接

👑 👑 👑 👑 👑 👑 👑 👑

稿定设计导出-20200720-120017.png

image.png

进入了rc版本阶段:

3.0.0-rc.2 (2020-07-20)
3.0.0-rc.1 (2020-07-17)

-- Alpha(α):预览版,或者叫内部测试版;一般不向外部发布,会有很多Bug;一般只有测试人员使用。
-- Beta(β):测试版,或者叫公开测试版;这个阶段的版本会一直加入新的功能;在 Alpha版之后推出。
-- RC(Release Candidate):最终测试版本;可能成为最终产品的候选版本,如果未出现问题则可发布成为正式版本。

多数开源软件会推出两个RC版本,最后的 RC2 则成为正式版本。

Here we go ~~

五步走天下去思考,步步渐进:

  • 我们怎么入手?
  • 有哪些新填API?和vue2不一样的地方?
  • 快在哪里,我们如何得知?
  • 大部分基于vue2的第三方组件库面临着升级?
  • 源码和周边知识点哪些值得学习的?

v3.vuejs.org

image.png

vue3一些核心,浪里个浪

更小更快
支持自定义渲染器
静态ID绑定标志
响应式修改为基于Proxy的侦测
深度结合typescript
基于treeshaking优化
Cache Handlers(事件侦听器的缓存)
...

setup()
ref()
watchEffect()
effect() 和 reactive()
...

与 2.x 版本生命周期相对应的组合式 API

beforeCreate → 使用 setup()
created → 使用 setup()
beforeMount → onBeforeMount
mounted → onMounted
beforeUpdate → onBeforeUpdate
updated → onUpdated
beforeDestroy → onBeforeUnmount
destroyed → onUnmounted
errorCaptured → onErrorCaptured

如何使用vue-next-template-explorer玩一玩?
https://vue-next-template-exp...

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", null, "static"),
    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)//1 patchflag flag是编译时生成的一个配置,只有带patchflag的Node(节点)会被追踪,比较text的文字变动
      
  ]))
}
<div>
  <span>static</span>
  <span>
    {{msg}}
  </span> 
</div>

vite简介
vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:

1、快速的冷启动,不需要等待打包操作;
2、即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
3、真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。

特征就是使用了ES Module,代码以模块的形式引入到文件,同时实现了按需加载。
其最大的特点是在浏览器端使用 export import 的方式导入和导出模块,在 script 标签里设置 type="module" ,然后使用 ES module。

看看github这个项目:
《前端会客厅第一期代码》和尤大聊vue3的 提升: https://github.com/shengxinji...

三种体验vue3的方式

vue-cli

  • Vue create vue3-demo-cli
  • Vue add vue-next
  • 代码文件 vue3-demo-cli

webpack

  • 代码文件 vue-demo-webpack
  • 代码仓库

新工具vite

  • create-vite-app
  • 代码文件 vue3-demo-vite

而且使用了wrk来测压:

// vue2 12个进程,300个并发,压19秒
➜  ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    130.58
Transfer/sec:     17.19MB
// vue3 12个进程,300个并发,压19秒
➜  ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    288.21
Transfer/sec:     40.69MB

入手vue3,浪里个浪

两步得天下:

git clone https://github.com/vuejs/vue-next-webpack-preview.git
cd vue-next-webpack-preview
npm install

https://github.com/vuejs/vue-...

1、检查vue-cli脚手架版本(vue -V),低版本的要更新(npm install @vue/cli -g)
2、创建项目(vue create vue3test )
3、进入项目文件夹,更新vue版本(vue add vue-next)
4、运行项目(npm run serve)

Tips: 不是一帆风顺的,过程中估计的修修改改,项目才能跑起来,O(∩_∩)O哈哈~_

入手vue3 demo,浪里个浪

https://vue3.github.io/vue3-N...

几个vue3 demo,给你强势入门vue3时代。

  • win10 datepanel
  • todolist
  • art 马里奥
  • 2019-ncov-vue3-version

等等...

image.png

其实官网也一些基础案例:

image.png

https://github.com/vuejs/vue-...

vue3源码集合,浪里个浪

【这是入口】你要找的 vue 源码 全宇宙的都在这!
https://github.com/vue3/vue3-...

vue3安装下来的是打包压缩:
image.png

核心代码在这里:
image.png

https://github.com/vuejs/vue-...

【这是入口】你要找的 vue 源码 全宇宙的都在这!
https://github.com/vue3/vue3-...

查看更多,必须浪里个浪

Vue3+ & Vue-CLI3+ 开发生态圈资讯

该推荐文章列表的最新资讯会第一时间发布到Github上,欢迎Star:
Find the latest breaking √vue3 & vue-cli 3 News

🚀欢迎Star,后续会不断更新。
🇨🇳 最后更新日期:2️⃣0️⃣2️⃣0️⃣/0️⃣7️⃣/1️⃣7️⃣

【2020】 ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡------------------------ 【2021】

除了单独Vue3资讯,欢迎查看更多vue.js资讯:【【🔥Vue.js资讯📚】目前web前端开发非常火爆的框架;定时更新,欢迎 Star 一下。

image.png

查看原文

寒水寺一禅 发布了文章 · 2020-08-24

解决chrome的input莫名其妙被填充问题

曾经有个问题,困惑了很久很久....

问题如下,当我点击role下拉框时,居然给我弹出了 用户名的自动填充
image

这他妈真恶心,我点的仅仅是个 select,并非用户名区域

image

然后网上找了很多方法,不外乎什么修改 autocomplete为off,什么display:none,然后再显示等等等,其中大量的帖子都是复制,粘贴别人的东西。没有一句自己的东西。

后来我发现,当我给一个input="text"设置 placeholder为邮箱emaile-mail这三个关键字时,点击input,也会出现自动填充

image

如果里面没有包含这三个关键字,则不会出现自动填充

image

事实上,这个特性是浏览器的,它是通过判断placeholder中的关键字去找的。但是找的不是我们网页中的用户名和密码。而是浏览器的地址和其他信息中的邮箱

image

如果没有添加地址和邮箱,那么即使设置 placeholder为"email"也不会出现填充

image

除非新增个地址

image

来了

image

那么和我们平时看到的用户名密码的填充和邮箱填充有什么区别呢?

用户名密码的填充是在“密码区域”
image

并且在当前“ip和端口”下已经有之前保存过的用户名和密码,才会出现自动填充,
image

浏览器找密码区域很容易,只需要知道哪个input的type是password即可,那么它怎么知道谁是用户名呢?

原来浏览默认会去找 离type=“password”最近的上方的那个域为“用户名”,进行填充,即使那个不是一个input,而是个select,只要一获取焦点,就出现 "用户名填充区域"。

那么问题来了,我不想让点击select被填充(因为这真的很恶心),该怎么做呢?

在我看来,有几下几个方法:
1、调整顺序,把真正的用户名放到password的上方(可以跟产品聊聊,如果顺序无所谓的话)

2、禁用掉浏览的自动填充功能

image

但这个只能依赖于用户,用户不禁用,你也没办法

3、将password拆分到另外一个 form 中,这样,一个form放普通的input,另一个form放password,两个form中的域互不干涉,点击input就不会自动填充了

4、在password上方再新增一个空的input type="text",并将其隐藏掉

查看原文

赞 12 收藏 6 评论 3

寒水寺一禅 收藏了文章 · 2020-08-05

如果想成为一名顶尖的前端,这份书单你一定要收藏!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由腾讯IVWEB团队 发表于云+社区专栏

作者:link

2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍。

JavaScript

入门

《JavaScript权威指南(第六版)》 ★★★★★

img

淘宝前端团队翻译的,看译者列表都是一堆大神。这本书又叫犀牛书,号称javascript开发者的圣经,网上对此书评价很多,大概意思都是说这本书是一本JavaScript文档手册,没有完整看过一遍此书的都不能算是一名合格的前端工程师。

我也是从这本书开始接触前端开发的,当时还是华章出版社的校园大使,免费申请到了这本书,可惜的是两年来我一直把它作为一本cookbook来查阅,一直没有好好通读一遍。个人感觉这本书还是写得枯燥了些,不过内容绝对是五颗星,无可挑剔!

《JavaScript高级程序设计》 ★★★★★

img

又称红宝书,雅虎首席前端架构师,YUI的作者Zakas出品。虽然书名带了“高级”二字,但是讲得也很基础,而且行文风格很流畅,每一小节就像是一篇博客,读起来并不枯燥,个人感觉比上面那本犀牛书可读性更强。说到这里,也推荐大家多多关注作者的博客: http://www.nczonline.net/ ,上面也有许多高质量的博文。感觉这本书就像是作者平时的博文按照前端知识体系组织成了一本技术书。

《JavaScript DOM编程艺术》

img

作为初学者如果觉得上面两本书作为入门书来说太厚了,也可以看看这本,不厚,评价也很高,但是由于本人没看过,就不作过多评价了。

《JavaScript编程精解》 ★★★★

img

用上下班时间看完的第三本书。看起来比较吃力,第五章函数式编程和第六章的面向对象编程很多都没看懂。全书游戏式的编程教程还是很有意思的。译者tom大叔名头很大,翻译的质量也只是中规中矩吧。不过,还是get到很多技巧!这本书的推荐语说这本书用来入门很好,但是个人认为初学者并不合适看这本书入门,作者在代码示例中不自觉得使用了一些高级用法,初学者看容易晕菜。听说最近出了第二版,加入了NodeJS的内容,这本书是开源的:http://eloquentjavascript.net/

《JQuery权威指南》 ★★★

img

当时在北京实习时,在每天下班回家的地铁上把这本书看完了。错误很多啊,不过其中的语法+示例的形式,确实很适合初学者。但是错误实在太多了,而且有些语句还不通顺,看着很累啊,只能说写得好代码的人,书不一定写得好。

《ECMAScript6入门》 ★★★★

img

前端工程师当然要关注ECMAScript的发展。阮老师的这本科普小书!短小精悍,通俗易懂。这本书也是开源的:http://es6.ruanyifeng.com/

进阶

《编写可维护的JavaScript》 ★★★★

img

又一本Zakas的书,还没读完,基本上是zakas那本红宝书的子集,重点是javascript代码风格、规范以及最佳实践。

《JavaScript异步编程》 ★★★★

img

掌握异步编程,显然是一位JS开发者必备的技能,用多看的畅读优惠看完了这本介绍js异步编程的科普小书,书中介绍了js异步编程的概念、场景和工具,不过更重要的是把这些工具给用起来。

《JavaScript设计模式》 ★★★

img

作者似乎很偏爱JQuery的源码,不过这本书tom大叔翻译的很烂,代码也很多没有缩进。。。 不推荐。

《Effective JavaScript》 ★★★★

img

这本书我当时看到最后一章“并发”的部分就很吃力了,显然这是一本进阶的js书籍,还是先把那本权威指南啃完吧!听说这本书上的技巧对于IE6有很好的优化效果,不过显然书上提到的这些技巧肯定已经大量的运用到JQuery、Underscore这样流行的JS库中,这些第三方库已经帮我们把这些优化细节封装得很好了。

《JAVASCRIPT语言精髓与编程实践》

img

一本讲JavaScript的硬书,以JavaScript这门语言为栗子,讲述编程语言的特性(动态语言、函数式编程、面向对象编程等等)。作者周爱民老师是前支付宝架构师,现豌豆荚架构师。

《高性能JavaScript》

img

Zakas大神的又一本神书,高工推荐的。

最近开始看《You dont know JS》了,看了个开头,感觉也很不错!

CSS

入门

《Head First HTML与CSS、XHTML(中文版)》

img

进阶

《CSS权威指南(第三版)》

img

虽然是一本老书,但是CSS 2.1是基础

《精通CSS(第2版)》

img

好吧!以上三本书,我都没看过。。。

网络协议 & 架构

《HTTP权威指南》 ★★★★★

img

涉及web开发的前端、后台、运维的同学都可以看看。web应用架构师必看。其中对其中“缓存”、“负载均衡“等章节印象很深,标准的教科书啊,肯定比看枯燥的HTTP规范好多了。

《Web性能权威指南》

img

Google工程师教你优化web性能,刚看了个开头,高工推荐,听说讲得比较深。

《大型网站技术架构》 ★★★★

img

网站架构入门科普。刚刚看完,写得挺好的,通俗易懂。开篇明义:“大型网站是演化出来的,而不是设计出来的。”,书中阐述了缓存为王,分层,解耦,模块化等网站架构中应该遵循的原则。其中负载均衡那一节,基本上是参考的《HTTP权威指南》负载均衡的内容。总结来说,纵向和横向分层以及可线性伸缩的能力是大型网站面对复杂业务和海量访问的制胜法宝!

NodeJS

入门

《了不起的Node.js》 ★★★

img

作为NodeJS入门挺好的一本书,可惜讲得太浅了,基本上就是介绍开发一个简单的NodeJS应用所要用到的一些技术和工具,对里面的原理以及NodeJS本身没有做太多的介绍,停留在介绍第三方库及其API的阶段。

《Node.js开发指南》

img

读了一半,就是看这本书理解了NodeJS的事件循环。作者是大神啊。

进阶

《深入浅出Node.js》

img

很出名的一本书,对NodeJS的一些原理做了深入介绍,挺不错的,还没看完。

用户体验 & 产品

《点石成金》 ★★★★

img

恰好读过第二版和第三版,第三版中添加了mobile web的内容,并且更新和添加了一些新例子,总得来说,我更喜欢第二版的精简。ponyma曾经推荐过的好书。

《结网@改变世界的互联网产品经理》 ★★★★

img

这本书读了挺久。用产品开发过程中的实际案例介绍了产品经理的工作内容以及如何开展工作。并从创建产品和个人修炼两个方面描述了需求分析,产品设计,项目管理,产品运营,产品经理的沟通能力以及个人和团队的创新能力等等,附录的推荐书目和工具质量也很高!作者是前腾讯产品经理,糗事百科的创始人,不过好像在知乎上因为创始人股权纠纷的问题,被黑臭了。。。

《参与感》 ★★

img

很出名的一本书,但其实营销部分讲得一般,老生常谈,不如我的朋友何老湿讲的好啊,不过可能对传统企业转型互联网有一定参考价值。设计那一块说的还挺有意思的,不过肯定还是不如我的另外两位设计师朋友开花和佐叔咯。哈哈!

《创京东》 ★★★

img

一本骗钱的书。看完之后的感受是,京东的核心部门是采销,仓储和物流,排名分先后。

问答
BDD框架的前端如何搭建?
相关阅读
全面进阶 H5 直播(上)
NodeJs内存管理
WebGL 纹理颜色原理
【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区

查看原文

寒水寺一禅 收藏了文章 · 2020-08-05

前端工程师成长之多读好书

1 引言

乱七八糟的书看了很多,有一本讲JavaScript的印象特别深开篇说的是"JavaScript是Java的脚本语言",但还是看完了,最后忘了书名。

下面列的这些都是看过后至少记得起书名的,也有部分是经常看的书,一起列出来,推荐给爱学习的同学。

2 前端技术

2.1 综合

  • 《现代前端技术解析》
  • 《Web前端开发最佳实践》
  • 《Web前端工程师修炼之道》
  • 《编写高质量代码-Web前端开发修炼之道》
  • 《响应式Web设计 HTML5和CSS3实战》 第二版
  • 《响应式设计、改造与优化》

2.2 基础

2.2.1 HTML && HTML5

  • 《HTML与CSS基础教程》第八版
  • 《HTML与XHTML权威指南》第六版
  • 《HTML5与CSS3实战指南》
  • 《HTML5和CSS3权威指南》
  • 《HTML5与CSS3设计模式》

2.2.2 CSS && CSS3

  • 《CSS世界》
  • 《CSS核心技术详解》
  • 《CSS权威指南》 第三版
  • 《CSS设计指南》第三版
  • 《精通CSS-高级Web标准解决方案》第二版
  • 《图解CSS3-核心技术与案例实战》

2.2.3 JavaScript && ES6+

  • 《看透JavaScript:原理、方法与实践》
  • 《实战ES2015:深入现代JavaScript 应用开发》
  • 《学习JavaScript数据结构与算法》 第二版
  • 《ES6标准入门》第三版
  • 《JavaScript忍者秘籍》第二版
  • 《JavaScript学习指南》第三版
  • 《You Don't Know JS》《你不知道的JS》
  • 《JavaScript权威指南》第六版
  • 《JavaScript高级程序设计》 第三版
  • 《JavaScript核心概念及实践》
  • 《JavaScript面向对象编程指南》第二版
  • 《JavaScript DOM编程艺术》第二版
  • 《JavaScript语言精粹》
  • 《动态函数式编程语言精髓与编程实践》

2.3 性能优化

  • 《Web性能权威指南》
  • 《高性能JavaScript》
  • 《JavaScript性能优化:度量、监控与可视化》
  • 《高性能网站建设指南》
  • 《高性能网站建设进阶指南》
  • 《大型网站性能监测、分析与优化》
  • 《网站性能监测与优化》
  • 《高效前端-Web高效编程与优化实践》
  • 《速度与激情-以网站性能提升用户体验》

2.4 安全

  • 《Web前端黑客技术揭秘》
  • 《白帽子讲Web安全》
  • 《黑客攻防技术宝典 Web实战篇》第二版
  • 《Web应用安全威胁与防治 基于OWASP Top 10与ESAPI》
  • 《Web之困-现代Web应用安全指南》
  • 《Web安全开发指南》
  • 《Web应用安全权威指南》
  • 《黑客攻防技术宝典 浏览器实战篇》
  • 《XSS跨站脚本攻击剖析与防御》

2.5 工程化 && 自动化

  • 《深入浅出Webpack》
  • 《深入PostCSS Web设计》
  • 《前端工程化体系设计与实践》
  • 《Web前端测试与集成- Jasmine/Selenium/Protractor/Jenkins的最佳实践》
  • 《Web前端自动化构建-Gulp、Bower和Yeoman开发指南》

2.6 协议

  • 《Web性能权威指南》
  • 《图解HTTP》
  • 《HTTP权威指南》
  • 《HTTPS权威指南》
  • 《图解TCP-IP》

2.7 浏览器

  • 《浏览器工作原理》 文章
  • 《Webkit技术内幕》

2.8 架构

  • 《JavaScript框架设计》第二版
  • 《前端架构设计》
  • 《JavaScript开发框架权威指南》
  • 《大型JavaScript应用实践最佳指南》
  • 《JavaScript框架高级编程》
  • 《JavaScript设计模式与开发实践》
  • 《JavaScript设计模式》
  • 《JavaScript模式》

3 学点其他的

3.1 所谓的全栈

  • Web开发者技能路线图
  • 教你成为全栈工程师
  • 《全栈增长工程师指南》 《全栈应用开发-精益实践》
  • 《Web全栈工程师的自我修养》
  • 《Web开发权威指南》
  • 《JavaScript快速全栈开发》
  • 《单页Web应用-JavaScript从前端到后端》
  • 《全栈开发之道-MongoDB+Express+AngularJS+Node.js》
  • 《全端Web开发-使用JavaScript和Java》

3.2 程序设计

  • 《代码大全》第二版
  • 《修改代码的艺术》
  • 《重构-改善既有代码的设计》
  • 《代码整洁之道》

3.3 计算机基础

  • 《深入理解计算机系统》第三版
  • 《计算机是怎样跑起来的》
  • 《程序是怎样跑起来的》
  • 《网络是怎样连接的》
查看原文

寒水寺一禅 赞了文章 · 2020-07-30

初学者应该看的 Webpack 完整指南(2020)

作者:Valentino Gagliardi
译者:前端小智
来源:valentinog
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

我们应该学习 webpack 吗 ?

如今,CLI工具(如create-react-appVue -cli)已经为我们抽象了大部分配置,并提供了合理的默认设置。

即使那样,了解幕后工作原理还是有好处的,因为我们迟早需要对默认值进行一些调整。

在本文中中,我们会知道 webpack可以做什么,以及如何配置它以满足我们的日常需求。

什么是 webpack?

作为前端开发人员,我们应该熟悉 module 概念。 你可能听说过 AMD模块UMDCommon JS还有ES模块

webpack是一个模块绑定器,它对模块有一个更广泛的定义,对于webpack来说,模块是:

  • Common JS modules
  • AMD modules
  • CSS import
  • Images url
  • ES modules

webpack 还可以从这些模块中获取依赖关系

webpack 的最终目标是将所有这些不同的源和模块类型统一起来,从而将所有内容导入JavaScript代码,并最生成可以运行的代码。

entry

Webpackentry(入口点)是收集前端项目的所有依赖项的起点。 实际上,这是一个简单的 JavaScript 文件。

这些依赖关系形成一个依赖关系图

Webpack 的默认入口点(从版本4开始)是src/index.js,它是可配置的。 webpack 可以有多个入口点。

Output

output是生成的JavaScript和静态文件的地方。

Loaders

Loaders 是第三方扩展程序,可帮助webpack处理各种文件扩展名。 例如,CSS,图像或txt文件。

Loaders的目标是在模块中转换文件(JavaScript以外的文件)。 文件成为模块后,webpack可以将其用作项目中的依赖项。

Plugins

插件是第三方扩展,可以更改webpack的工作方式。 例如,有一些用于提取HTML,CSS或设置环境变量的插件。

Mode

webpack 有两种操作模式:开发(development)生产(production)。 它们之间的主要区别是生产模式自动生成一些优化后的代码。

Code splitting

代码拆分延迟加载是一种避免生成较大包的优化技术。

通过代码拆分,开发人员可以决定仅在响应某些用户交互时加载整个JavaScript块,比如单击或路由更改(或其他条件)。

被拆分的一段代码称为 chunk

Webpack入门

开始使用webpack时,先创建一个新文件夹,然后进入该文件中,初始化一个NPM项目,如下所示:

mkdir webpack-tutorial && cd $_

npm init -y

接着安装 webpackwebpack-cliwebpack-dev-server

npm i webpack webpack-cli webpack-dev-server --save-dev

要运行 webpack,只需要在 package.json 配置如下命令即可:

  "scripts": {
    "dev": "webpack --mode development"
  },

通过这个脚本,我们指导webpack在开发模式下工作,方便在本地工作。

Webpack 的第一步

在开发模式下运行 webpack:

npm run dev

运行完后会看到如下错误:

ERROR in Entry module not found: Error: Can't resolve './src'

webpack 在这里寻找默认入口点src/index.js,所以我们需要手动创建一下,并输入一些内容:

mkdir src

echo 'console.log("Hello webpack!")' > src/index.js

现在再次运行npm run dev,错误就没有了。 运行的结果生成了一个名为dist/的新文件夹,其中包含一个名为main.js的 JS 文件:

dist
└── main.js

这是我们的第一个webpack包,也称为output

配置 Webpack

对于简单的任务,webpack无需配置即可工作,但是很快我们就会遇到问题,一些文件如果没有指定的 loader 是没法打包的。所以,我们需要对 webpack进行配置,对于 webpack 的配置是在 webpack.config.js 进行的,所以我们需要创建该文件:

touch webpack.config.js

Webpack 用 JavaScript 编写,并在无头 JS 环境(例如Node.js)上运行。 在此文件中,至少需要一个module.exports,这是的 Common JS 导出方式:

module.exports = {
  //
};

webpack.config.js中,我们可以通过添加或修改来改变webpack的行为方式

  • entry point
  • output
  • loaders
  • plugins
  • code splitting

例如,要更改入口路径,我们可以这样做

const path = require("path");

module.exports = {
  entry: { index: path.resolve(__dirname, "source", "index.js") }
};

现在,webpack 将在source/index.js中查找要加载的第一个文件。 要更改包的输出路径,我们可以这样做:

const path = require("path");

module.exports = {
  output: {
    path: path.resolve(__dirname, "build")
  }
}

这样,webpack将把最终生成包放在build中,而不是dist.(为了简单起见,在本文中,我们使用默认配置)。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

打包 HTML

没有HTML页面的Web应用程序几乎没有用。 要在webpack中使用 HTML,我们需要安装一个插件html-webpack-plugin

npm i html-webpack-plugin --save-dev

一旦插件安装好,我们就可以对其进行配置:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html")
    })
  ]
};

这里的意思是让 webpack,从 src/index.html 加载 HTML 模板。

html-webpack-plugin的最终目标有两个:

  • 加载 html 文件
  • 它将bundle注入到同一个文件中

接着,我们需要在 src/index.html 中创建一个简单的 HTML 文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack tutorial</title>
</head>
<body>

</body>
</html>

稍后,我们会运行这个程序。

webpack development server

在本文第一部分中,我们安装了webpack-dev-server。如果你忘记安装了,现在可以运行下面命令安装一下:

npm i webpack-dev-server --save-dev

webpack-dev-server 可以让开发更方便,不需要改动了文件就去手动刷新文件。 配置完成后,我们可以启动本地服务器来提供文件。

要配置webpack-dev-server,请打开package.json并添加一个 “start” 命令:

"scripts": {
  "dev": "webpack --mode development",
  "start": "webpack-dev-server --mode development --open",
},

有了 start 命令,我们来跑一下:

npm start

运行后,默认浏览器应打开。 在浏览器的控制台中,还应该看到一个 script 标签,引入的是我们的 main.js

clipboard.png

使用 webpack loader

Loader是第三方扩展程序,可帮助webpack处理各种文件扩展名。 例如,有用于 CSS,图像或 txt 文件的加载程序。

下面是一些 loader 配置介绍:

module.exports = {
  module: {
    rules: [
      {
        test: /\.filename$/,
        use: ["loader-b", "loader-a"]
      }
    ]
  },
  //
};

相关配置以module 关键字开始。 在module内,我们在rules内配置每个加载程序组或单个加载程序。

对于我们想要作为模块处理的每个文件,我们用testuse配置一个对象

{
    test: /\.filename$/,
    use: ["loader-b", "loader-a"]
}

test 告诉 webpack “嘿,将此文件名视为一个模块”。 use 定义将哪些 loaders 应用于些打包的文件。

打包 CSS

要 在webpack 中打包CSS,我们需要至少安装两个 loader。Loader 对于帮助 webpack 了解如何处理.css文件是必不可少的。

要在 webpack 中测试 CSS,我们需要在 src 下创建一个style.css文件:

h1 {
    color: orange;
}

另外在 src/index.html 添加 h1 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack tutorial</title>
</head>
<body>
<h1>Hello webpack!</h1>
</body>
</html>

最后,在src/index.js 中加载 CSS:

在测试之前,我们需要安装两个 loader:

  • css-loader: 解析 css 代码中的 url、@import语法像importrequire一样去处理css里面引入的模块
  • style-loader:帮我们直接将css-loader解析后的内容挂载到html页面当中

安装 loader:

npm i css-loader style-loader --save-dev

然后在webpack.config.js中配置它们

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html")
    })
  ]
};

现在,如果你运行npm start,会看到样式表加载在HTML的头部:

clipboard.png

一旦CSS Loader 就位,我们还可以使用MiniCssExtractPlugin提取CSS文件

Webpack Loader 顺序很重要!

在webpack中,Loader 在配置中出现的顺序非常重要。以下配置无效:

//

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader", "style-loader"]
      }
    ]
  },
  //
};

此处,“style-loader”出现在 “css-loader” 之前。 但是style-loader用于在页面中注入样式,而不是用于加载实际的CSS文件。

相反,以下配置有效:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  //
};

webpack loaders 是从右到左执行的。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

打包 sass

要在 webpack 中测试sass,同样,我们需要在 src 目录下创建一个 style.scss 文件:

@import url("https://fonts.googleapis.com/css?family=Karla:weight@400;700&display=swap");

$font: "Karla", sans-serif;
$primary-color: #3e6f9e;

body {
  font-family: $font;
  color: $primary-color;
}

另外,在src/index.html中添加一些 Dom 元素:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack tutorial</title>
</head>
<body>
  <h1>Hello webpack!</h1>
  <p>Hello sass!</p>
</body>
</html>

最后,将 sass 文件加载到src/index.js中:

import "./style.scss";
console.log("Hello webpack!");

在测试之前,我们需要安装几个 loader:

  • sass-loader:加载 SASS / SCSS 文件并将其编译为 CSS
  • css-loader: 解析 css 代码中的 url、@import语法像importrequire一样去处理css里面引入的模块
  • style-loader:帮我们直接将css-loader解析后的内容挂载到html页面当中

安装 loader:

npm i css-loader style-loader sass-loader sass --save-dev

然后在webpack.config.js中配置它们:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html")
    })
  ]
};

注意loader的出现顺序:首先是sass-loader,然后是css-loader,最后是style-loader

现在,运行npm start,你应该会在HTML的头部看到加载的样式表:

clipboard.png

打包现代 JavaScrip

webpack 本身并不知道如何转换JavaScript代码。 该任务已外包给babel的第三方 loader,特别是babel-loader

babel是一个JavaScript编译器和“编译器”。 babel 可以将现代JS(es6, es7...)转换为可以在(几乎)任何浏览器中运行的兼容代码。

同样,要使用它,我们需要安装一些 Loader:

  • babel-core :把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理
  • babel-preset-env:将现代 JS 编译为ES5
  • babel-loader :用于 webpack

引入依赖关系

npm i @babel/core babel-loader @babel/preset-env --save-dev

接着,创建一个新文件babel.config.json配置babel,内容如下:

{
  "presets": [
    "@babel/preset-env"
  ]
}

最后在配置一下 webpack :

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html")
    })
  ]
};

要测试转换,可以在 src/index.js中编写一些现代语法:

import "./style.scss";
console.log("Hello webpack!");

const fancyFunc = () => {
  return [1, 2];
};

const [a, b] = fancyFunc();

现在运行npm run dev来查看dist中转换后的代码。 打开 dist/main.js并搜索“fancyFunc”:

\n\nvar fancyFunc = function fancyFunc() {\n  return [1, 2];\n};\n\nvar _fancyFunc = fancyFunc(),\n    _fancyFunc2 = _slicedToArray(_fancyFunc, 2),\n    a = _fancyFunc2[0],\n    b = _fancyFunc2[1];\n\n//# sourceURL=webpack:///./src/index.js?"

没有babel,代码将不会被转译:

\n\nconsole.log(\"Hello webpack!\");\n\nconst fancyFunc = () => {\n  return [1, 2];\n};\n\nconst [a, b] = fancyFunc();\n\n\n//# sourceURL=webpack:///./src/index.js?"); 

注意:即使没有babel,webpack也可以正常工作。 仅在执行 ES5 代码时才需要进行代码转换过程。

在 Webpack 中使用 JS 的模块

webpack 将整个文件视为模块。 但是,请不要忘记它的主要目的:加载ES模块

ECMAScript模块(简称ES模块)是一种JavaScript代码重用的机制,于2015年推出,一经推出就受到前端开发者的喜爱。在2015之年,JavaScript 还没有一个代码重用的标准机制。多年来,人们对这方面的规范进行了很多尝试,导致现在有多种模块化的方式。

你可能听说过AMD模块,UMD,或CommonJS,这些没有孰优孰劣。最后,在ECMAScript 2015中,ES 模块出现了。

我们现在有了一个“正式的”模块系统。

要在 webpack 使用 ES module ,首先创建 src/common/usersAPI.js 文件:

const ENDPOINT = "https://jsonplaceholder.typicode.com/users/";

export function getUsers() {
  return fetch(ENDPOINT)
    .then(response => {
      if (!response.ok) throw Error(response.statusText);
      return response.json();
    })
    .then(json => json);
}

src/index.js中,引入上面的模块:

import { getUsers } from "./common/usersAPI";
import "./style.scss";
console.log("Hello webpack!");

getUsers().then(json => console.log(json));

生产方式

如前所述,webpack有两种操作模式:开发(development )和(production)。 到目前为止,我们仅在开发模式下工作。

在开发模式中,为了便于代码调试方便我们快速定位错误,不会压缩混淆源代码。相反,在生产模式下,webpac k进行了许多优化:

  • 使用 TerserWebpackPlugin 进行缩小以减小 bundle 的大小
  • 使用ModuleConcatenationPlugin提升作用域

在生产模式下配 置webpack,请打开 package.json 并添加一个“ build” 命令:

现在运行 npm run build,webpack 会生成一个压缩的包。

Code splitting

代码拆分(Code splitting)是指针对以下方面的优化技术:

  • 避免出现一个很大的 bundle
  • 避免重复的依赖关系

webpack 社区考虑到应用程序的初始 bundle 的最大大小有一个限制:200KB

在 webpack 中有三种激活 code splitting 的主要方法:

  • 有多个入口点
  • 使用 optimization.splitChunks 选项
  • 动态导入

第一种基于多个入口点的技术适用于较小的项目,但是从长远来看它是不可扩展的。这里我们只关注第二和第三种方式。

Code splitting 与 optimization.splitChunks

考虑一个使用Moment.js 的 JS 应用程序,Moment.js是流行的时间和日期JS库。

在项目文件夹中安装该库:

npm i moment

现在清除src/index.js的内容,并引入 moment 库:

import moment from "moment";

运行 npm run build 并查看控制的输出内容:

 main.js    350 KiB       0  [emitted]  [big]  main

整个 moment 库都绑定到了 main.js 中这样是不好的。借助optimization.splitChunks,我们可以从主包中移出moment.js

要使用它,需要在 webpack.config.js 添加 optimization 选项:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  module: {
  // ...
  },
  optimization: {
    splitChunks: { chunks: "all" }
  },
  // ...
};

运行npm run build 并查看运行结果:

        main.js   5.05 KiB       0  [emitted]         main
vendors~main.js    346 KiB       1  [emitted]  [big]  vendors~main

现在,我们有了一个带有moment.js 的vendors〜main.js,而主入口点的大小更合理。

注意:即使进行代码拆分,moment.js仍然是一个体积较大的库。 有更好的选择,如使用luxondate-fns

Code splitting 与 动态导入

Code splitting的一种更强大的技术使用动态导入来有条件地加载代码。 在ECMAScript 2020中提供此功能之前,webpack 提供了动态导入。

这种方法在 Vue 和 React 之类的现代前端库中得到了广泛使用(React有其自己的方式,但是概念是相同的)。

Code splitting 可用于:

  • 模块级别
  • 路由级别

例如,你可以有条件地加载一些 JavaScript 模块,以响应用户的交互(例如单击或鼠标移动)。 或者,可以在响应路由更改时加载代码的相关部分。

要使用动态导入,我们先清除src/index.html,并写入下面的内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic imports</title>
</head>
<body>
<button id="btn">Load!</button>
</body>
</html>

src/common/usersAPI.js中:

const ENDPOINT = "https://jsonplaceholder.typicode.com/users/";

export function getUsers() {
  return fetch(ENDPOINT)
    .then(response => {
      if (!response.ok) throw Error(response.statusText);
      return response.json();
    })
    .then(json => json);
}

src/index.js

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  //
});

如果运行npm run start查看并单击界面中的按钮,什么也不会发生。

现在想象一下,我们想在某人单击按钮后加载用户列表。 “原生”的方法可以使用静态导入从src/common /usersAPI.js加载函数:

import { getUsers } from "./common/usersAPI";

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  getUsers().then(json => console.log(json));
});

问题在于ES模块是静态的,这意味着我们无法在运行时更改导入的内容。

通过动态导入,我们可以选择何时加载代码

const getUserModule = () => import("./common/usersAPI");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  getUserModule().then(({ getUsers }) => {
    getUsers().then(json => console.log(json));
  });
});

这里我们创建一个函数来动态加载模块

const getUserModule = () => import("./common/usersAPI");

现在,当你第一次使用npm run start加载页面时,会看到控制台中已加载 js 包:

clipboard.png

现在,仅在单击按钮时才加载/common/usersAPI

clipboard.png

对应的 chunk 是 0.js

通过在导入路径前面加上魔法注释/ * webpackChunkName:“ name_here” * /,可以更改块名称:

const getUserModule = () =>
  import(/* webpackChunkName: "usersAPI" */ "./common/usersAPI");

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  getUserModule().then(({ getUsers }) => {
    getUsers().then(json => console.log(json));
  });
});

clipboard.png

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://www.sitepoint.com/web...

交流

文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

查看原文

赞 57 收藏 40 评论 0

认证与成就

  • 获得 570 次点赞
  • 获得 23 枚徽章 获得 0 枚金徽章, 获得 5 枚银徽章, 获得 18 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2017-05-03
个人主页被 2.8k 人浏览