FrankKai
FrankKai
- compilation.hooks.processAssets - compiler还有什么hooks - compilation还有什么hooks - webpack中的module，chunk，bundle有什么区别 ### compilation.hooks.processAssets 这个compilation的钩子可以处理静态产物。 ```js compilation.hooks.processAssets.tap( { name: 'MyPlugin', stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, // 阶段 }, (assets) => { // 产物对象，key为asset路径，value为asset数据 } ); ``` PROCESS_ASSETS_STAGE_SUMMARIZE：总结现有资产表阶段。...
demo repo: https://github.com/FrankKai/npm-bundle-demo - tsc - rollup - webpack - esbuild
- 问题场景 - npm包改造前，仅支持esm - npm包改造后，既支持esm，又支持cjs - 为什么改造后，还是会报错？ - 如何理解ts编译配置esModuleInterop？ - 其它npm包中类似__importDefault的函数 - 有哪些包是要开启esModuleInterop后，在esm环境中引入的？ - 总结 ### 问题场景 遇到一个很有趣的场景，cjs中需要引入原先打包方式为esm方式的模块。 也就是想要通过require()，去引入一个export的模块。 my-npm-package包的暴露方式为： ```js import foo from "./foo"; import bar from './bar';...
原文： https://webpack.js.org/contribute/writing-a-plugin/ demo: https://github.com/FrankKai/webpack-plugin-demo - 什么是插件 - 新建一个插件 - 插件的基础架构 - compiler和compilation - 异步事件hook - tapAsync - 示例 ### 什么是插件 插件是webpack引擎开放给第三方开发者的一种潜力机制。使用分阶段构建callback，开发者可以引进自己的行为到webpack构建进程。比起构建loader，构建插件更加高级一些，因为你需要理解一些webpack底层内部的hook。做好看源码的准备！ ### 新建一个插件 一个webpack插件，由以下这些内容组成： - 一个具名js函数或者js类 - 在原型链上定义一个apply方法 - 声明接入的事件hook...
原文：https://webpack.js.org/contribute/writing-a-loader/#setup demo仓库：https://github.com/FrankKai/webpack-loader-demo - 什么是loader - 安装 - 简单用法 - 复制用法 - 指南 - 简单 - 链式 - 模块化 - 无状态 - loader工具 - loader依赖 - 模块依赖 - 通用代码 - 绝对路径...
TypeScript类型体操，核心思想是 **通过类型生成新的类型！** 记录一下type-challenges的题解，以及解题思路。 仓库地址：https://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.md ### 2 - 获取函数返回类型 `infer / (...args: any) => infer P` https://github.com/type-challenges/type-challenges/issues/11520 ### 3 - 实现 Omit `keyof / extends / in` https://github.com/type-challenges/type-challenges/issues/11545 ### 4 -...
阅读vue源码的时候发现有TypeScript，一脸懵逼，因此需要入个门。 新公司工作中需要用到TypeScript，学习过程中遇到一些疑惑，做了记录。 - ts类型中的?，意思是什么？ - 什么是duck typing？ - constructor之前的变量定义是什么？ - declare是什么？ - ts中unknown, void, null和undefined，never区别是什么？ - ts中的泛型约束是什么？ - 数组类型的两种定义方式 - ts中的类型断言 - 泛型函数与泛型接口 - 如何理解as const？ - declare global是什么意思？ -...
高中物理老师每次开年级大会的时候，开场白总是喜欢说一句：”人生如梦！“，当时没有什么感受，直到工作了几年以后，这种感受尤为强烈。 算上读大学的时间，来杭州已经9年了，4年读大学+5年工作，可以说是资深杭漂了。 有几段经历还是记忆挺深刻的，和大家分享下。 主要分享一下在杭州这几年的工作和生活感受，以及对未来的一种期许。 ## 工作感受 ### 实习期以及第一份工作 大三暑假在学校体育馆投了一份简历，匆匆忙忙找了一份在滨江的实习，算是正式入坑前端了。 暑期实习期间和室友租了一间房，领养了一只猫，当时每天学习在公司高负载学习前端基础，抱着红宝书就是啃，5点多下班，回到家6，7点，累到每次睡1个多小时才能缓过来。 暑期结束以后，就从实习公司离开回到了学校，领养的猫也很无奈地送回了原主人那里，开始准备找秋招实习的机会。 秋招拿到一家在拱墅区的实习机会，每天早上6点起床，坐公交车从下沙到城西，接近2小时到公司实习，真不知道当时怎么坚持下来的，放到现在是真的没有这个毅力。 在校招公司顺利转正了，而且认识了许多到现在还保持联系的小伙伴，有同部门的老学长，老大哥，也有跨部门的老哥老姐，更多的是同届一起进来实习的小伙伴。 在这里学习到很多，第一个独立完成的前端项目就是在这里，第一次跟着有经验的前辈做项目也是在这里。可以说在这里有了真正的前端项目落地的经验。 但是由于辛辛苦苦一个月下来，几乎没有存款，实在是看不到未来的希望，而且部门流动性也特别大，只能无奈地选择了离开。 ### 电商公司抗大梁 在一家火速发展的电商公司，负责从零到一将IM系统、模板系统等等核心功能的设计和实现，在这里呆了有接近3年的时间，项目经验和代码能力在这里得到了极大的提升。 这里的大多数小伙伴，人非常nice，团队氛围特别棒。除了日常的工作之余，一有时间就去学习前端相关的知识以及夯实编程基本功，在这里成长特别大。 由于公司发展比较迅猛，相比于之前的工作，在这里涨薪幅度还是比较给力的，几乎半年多就涨一次薪。 但是由于项目单一，成长受限，所以只能做出换一个环境的选择。 ### 上市公司节奏快 也是目前在职的公司，在这里是压力与成长并存的。尤其是刚来的第一年，压力几乎是拉满的，但是成长与收获也是非常大的。 不仅接触了各式各样的前端项目，设计前端技术方案、落地webComponents项目、开发低代码组件、维护webRTC SDK、开发vscode插件等等等等，在技术深度上面也在逐渐加强，总体来说这里还是挺不错的。 虽然说由于种种原因，公司有一些不得已的降本提效操作，对于疫情下的低迷经济而言，可以说是一个考验。 ## 生活感受 ###...
- for循环比forEach做break和return方便一些 - 过滤出存在至少一个mqtt协议的条目 - 实现一个sleep函数，并且每隔1秒打印出心形的一行 - 小数取整 - 十六进制色转RGB方便调整透明度 - await一个promise异常如何捕获？ - 计算属性不仅仅可用于拼接，还可以用于逻辑计算 - Object.is与==和===有什么不同？ - 如何实现一个浅比较？浅比较中的“浅”代表什么意思？ - proxy方式的属性监听（watch） - encodeURI vs encodeURIComponent - Function.prototye.bind()怎么用 - 可选链的执行过程 - e.target和e.currentTarget...
最近准备一个技术分享，看到以前做的一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。 - 语音转写流程图 - PC端浏览器如何录音 - 录音完毕后语音如何发送 - 语音发送和实时转写 - 通用录音组件 - 总结 ### 语音转写流程图  ### PC端浏览器如何录音 ``` AudioContext，AudioNode是什么？ MediaDevice.getUserMedia()是什么？ 为什么localhost能播放，预生产不能播放？ js中的数据类型TypedArray知多少？ js-audio-recorder源码分析 代码实现 ``` #### AudioContext是什么？ AudioContext接口表示由链接在一起的音频模块构建的音频处理图形，每个模块由一个AudioNode表示。 一个audio...