宣布开放 Web 组件

宣布开放厕所

宣布开放厕所

开放 Web 组件建议

大家好！👋

我们是open-wc一群开源和 Web 组件爱好者。我们的目标是为每个人提供一套强大且久经考验的配置，用于创建和共享开源 Web 组件。

许多 Web 开发者都经历过可怕的“JavaScript 疲劳”。我们希望通过我们的建议，让您享受到几乎所有事情都拥有一个众所周知的默认解决方案所带来的安心。从 IDE 到 CI，open-wc 都能满足您的需求。

我们希望 Web 组件开发对每个人来说都易于上手，无论您的背景或经验如何。因此，我们的建议旨在易于使用、随时可用，并提供我们在 Web 组件开发各个方面都渴望的“即用即用”的开发者体验。

我们坚信，长期来看，紧跟浏览器标准对您的代码而言是最佳的投资。这是我们所有建议的基础，这意味着有时我们不会推荐某些热门特性或功能。这也意味着我们可以更快地采用和推荐新的浏览器标准。

为什么使用 Web Components

近几年，基于组件的 Web 应用开发模型逐渐普及，JavaScript 社区也蓬勃发展，涌现出各种各样的库和方法。Google 于 2012 年开始着手标准化 Web 原生组件模型，经过数年的开放式开发，该模型于 2019 年成功应用于所有主流浏览器。截至本文撰写时，超过 10% 的页面浏览量包含 Web 组件。

我们相信 Web 组件能够为可重用性、互操作性和封装性等问题提供基于标准的解决方案。此外，我们相信使用浏览器的原生组件模型将延长应用程序的寿命。Web 拥有极其强大的向后兼容性传统，因为标准机构一直在不遗余力地维护遗留 API。

您将open-wc找到开始开发 Web 组件所需的一切。

发展

在我们的开发部分，您将找到有关编写代码所需了解的所有信息；从实用的代码演示、可访问性、混合、教程和博客文章。

我们提供各种交互式演示，帮助您快速开始编写代码：

如果您想首先了解有关 Web 组件的更多信息，我们推荐以下博客文章，为您开始开发 Web 组件奠定坚实的基础：

• 让我们构建 Web 组件！作者：Benny Powers
• Web 组件：从零到英雄（作者 Pascal Schilp）

测试

我们不仅提供Karma、Browserstack 和 Wallaby 的测试设置，还提供一组测试助手来帮助您：

制作固定装置：

CAPTION: code snippet
import { html, fixture } from '@open-wc/testing-helpers';

it('can instantiate an element with properties', async () => {
    const el = await fixture(html`<my-el .foo=${'bar'}></my-el>`);
    expect(el.foo).to.equal('bar');
}

比较 DOM：

CAPTION: code snippet
import { html, fixture } from '@open-wc/testing-helpers';

it('has the following dom', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'} </h1>  </div>`);
    expect(el).dom.to.equal('<div><h1>Hey</h1></div>');
});

管理时间：

CAPTION: code snippet
import { nextFrame, aTimeout, html, fixture } from '@open-wc/testing-helpers';

const el = await fixture(html`<my-el .foo=${'bar'}></my-el>`);
el.foo = 'baz';
await nextFrame();

expect(el.shadowRoot.querySelector('#foo').innerText).to.equal('baz');

定义多个自定义元素：

CAPTION: code snippet
import { fixture, defineCE } from '@open-wc/testing-helpers';

const tag = defineCE(class extends MyMixin(HTMLElement) {
    constructor() {
        super();
        this.foo = true;
    }
});
const el = await fixture(`<${tag}></${tag}>`);
expect(el.foo).to.be.true;

应用启动器

许多开发者都经历过所谓的“JavaScript 疲劳”，这种感觉令人难以承受，因为他们必须跟上 JavaScript 生态系统中每一项新技术的步伐。JavaScript 工具的学习曲线令人望而生畏，配置起来也常常令人沮丧。哪些工具才是合适的？我应该使用哪些工具？这些工具是如何工作的？

我们的建议旨在帮您免去一些繁琐的设置步骤，让您直接进入最有趣的开发环节。如果您想快速上手，使用强大的设置工具，充分利用最佳浏览器标准，那么我们的open-wc-app-starter或许就是您的理想之选！

现场演示在这里。

我们的 open-wc-app-starter 将为您设置完整的配置，具有以下功能：

• 模块解析
• 自动模块类型选择
• HTML、JS 和 CSS 压缩
• es2015 和 es5 输出
  • 使用webpack-babel-multi-target-plugin，我们的构建会输出应用的 es5 和 es2015 版本。使用nomodule 技巧，我们可以在现代浏览器上提供 es2015 代码，在老版本浏览器（特别是 IE11）上提供 es5 代码。这显著减少了应用在现代浏览器上的体积。
• 无再生器运行时/变换
• 根据用途分类的 Polyfill
  • 根据浏览器支持情况和使用情况添加语言 polyfill。这将显著缩小应用的初始包体积。
• 语法和 JavaScript API
  • 我们的配置仅支持标准 JavaScript 语法和浏览器 API。我们支持第三阶段的提案，前提是这些提案能够带来显著的价值，并且易于支持，且不会对性能造成重大影响。我们支持的一些提案包括：
    • 动态导入
    • 导入.meta.url
• 使用 Karma 进行测试套件
• 使用 ESLint、Prettier 和 commitlint 进行 Linting

open-wc-app-starter 您可以在此处找到更多文档。我们致力于提供最佳、用户友好的设置，您的反馈对我们非常宝贵，因此，如果您觉得缺少任何内容或有任何反馈，请随时在我们的仓库中创建问题。

还有更多

其他建议包括：linting、demoing、build、publishing和automating。我们还拥有一系列生成器，可在您当前的项目中即插即用我们的任何设置。

如果您有兴趣进一步了解我们的理念和建议的理由，您可以在这里了解。

我们的目标是帮助您尽快、轻松地完成设置。如果您觉得我们的建议有所缺失，请随时联系我们。请注意，我们的建议和最佳实践可能会随时更改，并可能随着时间的推移而演变。

加入对话！

我们非常乐意倾听您的任何反馈或疑问。您可以通过以下方式联系我们：

• 如果您有任何问题或反馈，请随时在我们的Github上提出问题。

• 您也可以在 Polymer slack 的#open-wc频道找到我们。您可以通过此链接
  加入 Polymer slack 。

• 您可以在以下位置找到我们的建议和文档：open-wc。

您还可以在 Twitter 上找到我们：BennyP、daKmoR、passle

🚽 由open-wc精心制作。