发布自定义元素，命名约定，最佳做法？

Question

我即将公开我的自定义元素<card-t>

预发布版本位于：https://github.com/card-ts/playingcardts

非常感谢您的建议和增强功能！

问题对：

命名自定义元素

有：https://www.webcomponents.org/community/articles/how-should-i-name-my-element
但这并不能避免“必须包含连字符”

我和element.card-t.js一起进行排序。

其他最佳做法？

包装IIFE和ES模块？

自定义元素在全局命名空间中创建，并且不会像库那样返回任何内容。

将IIFE包裹起来就足够了吗？

将其加载为模块是否有价值？

<script type="module" src="element.card-t.js">

扩展自定义元素

默认情况下，我们是否应该返回类定义，以便扩展更容易？

Answer 1

由于这是一个意见问题，这些是我的意见：

命名自定义元素

我总是根据我的类名来命名我的JS文件，而我的类名只是标签名，但大写。因此我的标签<my-thing>的类名是MyThing，文件名是components/MyThing.js

包装IIFE和ES模块？

我用ES6 +创建所有代码，然后创建附加的ES5 CommonJS版本和ES5 IIFE版本，并让人们加载所需的内容。

我使用rollup和我的 component-build-tools 来创建各种版本。 component-build-tools 组件构建工具还将组件的所有依赖关系组合到输出文件中。这可能会导致某些复制，但是大多数时候我都不介意。

我的组件最终将其模板和语言环境字符串嵌入到已发布的文件中。这是 component-build-tools 的功能。

扩展自定义元素

通常，我以文件的所有三种格式公开类名。这确实有助于扩展我的组件，但是我怀疑很多人会想要这样做。

文件放置位置。

最困难的是将文件放置在何处，以便网页可以轻松访问它们。

我有一个构建步骤，将我的文件从node_modules文件夹复制到dist文件夹。对于我来说，这是最容易知道我的文件确切位置的最简单的事情。

这样做可以使我npm install进行任何操作，然后仍将其文件保存到我知道并可以使用的位置。但这也使我不必担心文件在存储库中的位置。

我的确确实有一个dist文件夹，并且其中有：

dist
 +- js
     +- components
         +- MyThing.js
         +- MyThing.min.js
         +- AnotherThing.js
         +- AnotherThing.min.js
         +- SoOn.js
         +- SoOn.min.js