…，所以这里我就选择不将其作为 PostCSS 插件来安装。 在 WXA 项目根目录中执行如下命令，会在你的项目根目录中生成一个 tailwindcss.config.js，它会作为后续你的项目配置的配置文件。 npx tailwindcss-cli@latest init Code language: CSS (css) 随后，在你的项目根目录创建一个 tailwind.css 文件，并在其中加入如下代码，这个文件作为你后续样式基础文件。 @tailwind base; @tailwind components; @tailwind utilities; Code language: CSS (css) 添加完成后，你就可以执行如下命令，来生成一个默认的 tailwindcss 样式文件。…
…一般来说，这个其实并没有什么，除非你的包并不开源，又或者你有精神洁癖，希望用户看到的包的文件目录是足够简单明了的。 这个时候，你可以借助 npm 中的 files 这个字段，来控制你需要上传的文件。 比如,如果你按照下面的方式配置 files 就可以控制你的包在发布时，只发布有限的文件，比如必须的 package.json、LICENSE、README 以及构建产物 dist 文件夹。 { “name”:”your-package”, “files”:[ “package.json”, “README.md”, “LICENSE”, “dist” ] } Code language: JSON / JSON with Comments (json)…
…Pull Request 会侵占维护者的心力，使得维护者无暇处理更加重要的事情。 当然，这样的问题是可能存在的。但换句话说，这也是一个开源项目维护者群体壮大的好机会。如果不堪其扰，有很多种方式来处理： 提拔已有的 Commiter 为 Contributor，由某个 Contributor 来处理 Typo 类型的 Pull Request。 慢慢合并 Typo Pull Request，开源项目的 Pull Request 的合并并不一定是很快的，事实上绝大多数项目的合并都不会很快，特别是一些大型项目。在这种情况下，你大可以慢慢处理。 所以，Typo 的 Pull Request 所产生的坏处大概率是可以通过一些方式规避掉，而让项目可以进一步的发展。 对于贡献者来说，Typo 有意义么？ 对于新手来说， Typo…
…{ pageInfo { endCursor hasNextPage hasPreviousPage startCursor } edges { starredAt node { email name company repositories(first:100, isFork: false) { totalCount } createdAt updatedAt twitterUsername websiteUrl followers(first: 0) { totalCount…
…’@vitejs/plugin-vue’ import path from ‘path’ // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { ‘@’: path.resolve(__dirname, ‘./src’), ‘@c’: path.resolve(__dirname, ‘./src/components’), }, } }) Code language: JavaScript (javascript) 参考地址：https://cn.vitejs.dev/config/#resolve-alias…
…() => import(‘../components/hello3′), { ssr: false } ) function Home() { return ( <div> <Header /> <DynamicComponentWithNoSSR /> <p>HOME PAGE is here!</p> </div> ) } export default Home Code language:…
…键，就可以将你当前的屏幕截取，并保存在系统的「图片\屏幕截图」目录中。 知乎《Windows10 自带截屏快捷键》 在 macOS 当中，只需要同时按住以下三个按键：Shift、Command 和3，就会拍摄截图。 Apple《在 Mac 上拍摄截屏》 无论是 Windows 还是 macOS ，都提供了基本的截图工具，但在实际使用的时候，你会发现，你产出的图片(如图1)大多数的时候是这样的：图片中元素极多、无关主题的元素无法被隐藏、桌面背景是你自己自定义的背景等一系列小瑕疵。 图1: macOS 自带的截图产出的截图 此外，不同设备上的不同按键让我们在切换设备的时候产生迷惑（特别是你从 Windows 切换到 macOS 或反过来切换时），此外，图片的批注也十分的麻烦，必须借助一些第三方的图片编辑软件（比如画图、Adobe Photoshop）来进行图片的编辑和标注。 有没有一个工具，可以帮助我用非常简单的方式完成截图，最好能在截图的时候可以完成图片的批注？ 短兵相接：聊天工具内置截图软件 / 第三方截图工具时期 随着时代的发展，截图的功能开始被更多的软件关注到，我们开始可以在聊天工具当中截图。 常见的比如使用…
在写测试的时候，如果你需要对大量的数据进行 compare 处理的时候，你大概率不会把所有需要对比的对象都列出来，而是选择直接循环处理。 在测试中如果有循环处理的时候，很有可能会出现的一个问题是你可能无法在测试无法通过时快速定位道具体是循环中的哪一个元素出现的问题。这个时候的定位就会比较麻烦。 一个比较好的办法是，可以在 Jest 中加入 try/catch 中来处理错误，这样可以在出现错误的时候，打印一些辅助信息来快速定位，比如 it(‘test-error-catch-example’,() => { let needTestData = [1,2,3,4] needTestData.foreach( item => { let result = doSomething(item) // 这里开始是新增的 try{ expect(result).toBe(true) }catch(e){ console.log(“error…
在开发 Gutenberg 插件时，如果你需要对编辑器的内容进行处理，则需要为其加入防抖措施，避免你的函数被频繁调用。 思路 由于编辑器需要高频处理，因此需要采用防抖策略，避免将多次输入视为不同的事件。这里可以使用 WordPress 提供的 useDebounce 来实现控制。需要注意的是，WordPress 自动的 Debounce 函数传入的参数应当采用 useCallback 来进行包裹。 参考代码 import {subscribe} from “@wordpress/data”; import {useDebounce} from “@wordpress/compose” import {useCallback} from “@wordpress/element”; const debounced =…
我最近在准备开发新的 WordPress 的主题的工具，为了方便自己开发主题，正在准备一个脚手架，本文是开发过程中的经验总结。 白宦成 在进行主题开发的时候，一个很好的体验是来自于变更能够实时生效。过去我们想要实现这样的功能需要自己手动刷新浏览器。但随着前端技术的进步，我们可以借助诸如 browser-sync 这样的工具来完成自动的刷新，从而实现无需手动刷新，代码修改后自动刷新。此外，除了 browser-sync, 你还可以选择 webpack-dev-server。 原理分析 此类工具的工作模式是比较简单的，一般而言，会要求你设定一个代理的端口，他会将对应端口的请求进行转发，并在其中加入 BrowserSync 的 JS 文件，从而实现可以无需手动操作来刷新。 browser-sync-client.js 而其刷新的能力则是源自于 BrowserSync 本地提供的 WebSocket Server。嵌入的 JS 文件中加入了 WebSocket 的相关链接代码， 从而实现从 Command Line 当中获取刷新指令，前端则在获取到指令后进行刷新。…