前端周刊发布每周前端技术相关的重大事件、文章教程、部分框架的版本更新以及代码和工具。每周定期发布，欢迎大家关注转载。如果外链无法访问，关注公众号前端每周看，里面有解决方法大事，大事！大事件！浏览器可能支持运行Typescript——今天，我们很高兴地宣布我们支持并与第三方合作，以推进新的Stage0提案，为JavaScript带来可选和可擦除的类型语法。因为这种新语法不会改变周围代码的行为方式，所以它实际上起到了注释的作用。我们认为这有可能使TypeScript更容易、更快速地用于各种规模的开发。ShaderPark:CreateInteractive2Dand3DShadersUsingJavaScript-一个基于Web的开源平台、社区和库，可让您使用JavaScript以编程方式创建着色器和GPU，从而简化神秘的着色器和GPU世界。这里有很多值得玩耍和探索的地方。注意：由于使用WebGL，本网站需要大量浏览器，可能不适合所有设备。Prettier2.6发布——流行的代码格式化工具现在有singleAttributePerLine选项，每行只放置一个属性（在某些类型的模板中很常见），添加了TypeScript4.6支持，以及在各种上下文中更好的格式优化的JS代码（例如装饰器，等待内联JSX，行尾注释）。在乌克兰的反战抗议活动中如何使用npm包-几天前，依赖于node-ipc（例如VueCLI）的项目的用户开始注意到一些奇怪的行为，包括定位到俄罗斯（或白俄罗斯）的系统上的文件被覆盖)和抗议信息。这是一个复杂的故事，但又一次提醒人们包装供应链是多么脆弱。如果您愿意，TheRegister有一篇更短更新的文章。Deno1.20已经发布——一个相当大的JavaScript/TypeScript运行时版本，具有更高的性能、用于运行基准测试和测试套件的新命令、AbortSignal超时，以及升级到V810.0和TypeScript4.6。如果所有的项目都写得像这样彻底就好了。文章HowToMakeaDrag-and-DropFileUploaderwithVue.js3-整整四年前，我们链接到Joseph的MakingDrag-and-DropFileUploaderwithvanillaJavaScript，但现在他又回来了最新版本的Vue.js面临同样的挑战。愉快的React文件/目录结构——我们已经介绍了很多这样的文章，但是对于“正确”的项目布局方式总是有另一种观点的余地，特别是因为React本身在这个问题上相当冷漠。jQuery源代码中的“双重赋值模式”-作者在jQuery代码中发现了一项有趣的技术，并着手研究其优势。Next.js的新官方“基础”课程-Next.js发布了一个新的基础课程，涵盖React的基础知识、它与Next.js的关系以及构建您的第一个Next.js应用程序。RemixvsNext.js-Remix是一个相对较新的基于React的全栈框架，由ReactRouter背后的原始团队创建。它采用了与更为知名的Next.js不同的方法。这是主要差异的详细指南。创建一个简单的表格排序和分页功能-在JavaScript的帮助下呈现一个可排序的分页表格。AdiscussionofwhereTypeScriptexcels-摘自对TypeScript的LukeHoban和DanielRosenwasser的采访。UpgradingNext.jsforInstantPerformanceImprovement-一个案例研究，说明Vercel团队如何将他们的Next.js8演示提升到Next.js12标准，并在此过程中看到了巨大的改进。框架发布了Verdaccio5.8-私有npm注册表，现在具有可定制的WebUI。Vuetify3.0Beta-Vue的材料组件框架。MDX2.1——Markdown中的JSX。ReactMenu3.0-可自定义的嵌套菜单组件。angular13.3.0代码和工具Peaks1.0：与音频波形交互的UI组件-假设您正在构建某种音频编辑器-这是您可能想要使用的控件类型。它也是来自BBC，非常酷。Wave.js2.0:RealSimpleStringDiffing—一个音频可视化库—如果您不需要创建音频编辑器而只想要music-go-wub-wub、line-go-wobble类型的可视化，这是为你。这里有一些现场演示。Faker6.0：在节点或浏览器中生成大量虚假数据——在维护者“流氓”出现问题后，一个社区团队接管了流行的Faker项目，他们的第一个主要版本现已推出，并提供ESM支持。v5到v6迁移说明。sysend.js:Sendmessagesbetweenpagesortabsopenedinthesamebrowser-一个小型库，抽象了在同一浏览器中打开的页面之间发送消息的机制。支持跨域通信，基于localStorage和BroadcastChannelAPI。这是一个演示（如果你打开它两次）。Chrome扩展CLI：下一个Chrome扩展的CLI——想尽快为Chrome构建一个扩展吗？该工具旨在让您尽快走上正轨。js2xml：将JavaScript代码转换为XML文档-为什么？显然，为了更容易使用XPath从其他地方提取内容。EmojiButton:AVanillaJavaScriptEmojiPicker——将按钮元素变成表情符号选择器（类似于某些操作系统提供的）。Liqvid2.1：使用React、HTML、CSS和JS创建交互式视频-现在您也可以在视频中使用WebAnimationsAPI。
