11ty-css-houdini-worklet-generator 中文文档教程
11ty CSS Houdini Worklet Generator
来自 Stephanie Eckles @5t3ph - ModernCSS.dev 的作者和11ty.岩石。
此工作集是使用 Eleventy 作为服务器环境生成的。
Worklet Demo
可以在此 CodePen 演示中查看此生成器中包含的非常简单的工作集。
该演示展示了如何包含所需的 polyfill，然后在脚本标记中要求工作集，以及如何通过 CSS 自定义属性修改它的显示属性。
To Use the Generator
CSS Houdini worklet 需要服务器才能运行。 虽然有很多方法可以创建用于开发和测试工作集的环境。 作为静态站点生成器，Eleventy 提供了一种快速设置和测试的简便方法，因此您可以专注于创建工作集！
开始之前 - 请务必将 package.json 详细信息更新为您自己的！
Project Structure
以下都在 src 中，这是您的工作目录
_includes/base.njk - 一个简单的 HTML5 模板，包括（当前需要的）polyfill对于 CSS Houdini Paint API，以及指向工作集在本地服务器上的位置的 CSS.paintWorklet.addModule
css/style.css - 本地服务器样式，这是您将工作集添加到测试元素的地方
index.md - 生成索引内容，并且可以交换到另一种 [11ty 支持的模板语言]()
worklet.js< /code> - 创建和注册工作集类的关键文件
Development
npm start - 将通过在监视模式下启动 Eleventy 来在本地运行项目，并包括一个由 Browsersync 提供的热重载的本地主机服务器。
Publishing / Using Your Worklet
Houdini.How 的建议是将您的 worklet 发布为 npm 包，以便它可以导入并通过访问它在 CDN 上，例如 unpkg。
这是因为需要通过 HTTPS 运行，所以 unpkg 可以很容易地在其他地方共享和包含，例如 CodePen。
要通过 npm 发布，您首先需要设置一个帐户。
然后在您的本地项目中，运行 npm publish。
包含的
prepublish命令将确保 Eleventy 已全新运行，以确保您的工作集的最新版本可用。
几分钟后，您将看到您的包已添加到您的 npm 帐户，然后它也将在 https://unpkg.com/your-package-name
查看 CodePen Demo 查看如何将其包含在本地项目之外。
Updating Your Worklet
如果您对工作集进行了更改，请使用包含的 bump 命令轻松增加您的包编号，例如：npm run bump patch，然后继续运行 npm publish 。
您的更改将在几分钟内可用。
11ty CSS Houdini Worklet Generator
From Stephanie Eckles @5t3ph - author of ModernCSS.dev and 11ty.Rocks.
This worklet was produced using Eleventy as the server environment.
Worklet Demo
The very simple worklet that is included in this generator can be viewed in this CodePen demo.
The demo shows how to include the required polyfill and then require the worklet within a script tag, and how to modify it's display attributes via CSS custom properties.
To Use the Generator
CSS Houdini worklets require a server to run. While there are many ways to create an envirnoment for developing and testing your worklet. As a static site generator, Eleventy provides a slim way to get setup and testing quickly so you can focus on creating your worklet!
Before you begin - be sure to update the package.json details to your own!
Project Structure
The following are all within src which is your working directory
_includes/base.njk - a simple HTML5 template that includes the (currently required) polyfill for the CSS Houdini Paint API, as well as the CSS.paintWorklet.addModule pointing to the worklet's location on the local server
css/style.css - the local server styles, this is where you add your worklet to your test elements
index.md - produces the index content, and can be swapped to another one of [11ty's supported templating languages]()
worklet.js - the critical file that creates and registers your worklet class
Development
npm start - will run the project locally by launching Eleventy in watch mode and include a localhost server with hot reload provided by Browsersync.
Publishing / Using Your Worklet
The recommendation from Houdini.How is to publish your worklet as an npm package so that it can be imported and used by accessing it on a CDN such as unpkg.
This is because of the requirement of running via HTTPS, so unpkg makes it easy to share and include elsewhere such as CodePen.
To publish via npm, you will first need to set up an account.
Then within your local project, run npm publish.
The included
prepublishcommand will ensure Eleventy has been freshly run to ensure the latest version of your worklet is available.
Within a few minutes you will see your package added to your npm account, and then it will also be available at https://unpkg.com/your-package-name
Review the CodePen Demo to see how to then include it outside of your local project.
Updating Your Worklet
If you make changes to your worklet, use the included bump command to easily increment your package number, ex: npm run bump patch, then proceed to run npm publish.
Your changes will be available within a few minutes.
