Component Configuration & CSS Files

今天我们来讲讲Lightning Web Components里一个非常重要但又容易被忽略的部分——组件的文件结构，尤其是那个关键的配置文件。 首先，每个组件都必须有一个叫 .js-meta.html 的文件，也就是我们常说的配置文件。这个文件是必需的，绝对不能少。它定义了什么呢？主要是 API 版本、这个组件是否向构建者公开、它支持哪些目标，以及可以设置哪些设计属性。如果少了这个文件，你马上就会看到一个错误提示：“找不到Lightning组件捆绑包”。所以同学们，创建组件的时候，一定要先检查有没有这个 meta 文件，不然整个组件都没法用。 接下来，我们说说 CSS。CSS 是可选的，不是必须的。如果你写了 CSS 文件，它会通过标准的 CSS 语法自动应用到组件上。不过要注意，它的大小有限制，最大不能超过 128 KB。如果你想在多个组件之间共享 CSS，可以通过只支持 CSS 的模块来实现。这样一来，就能避免重复写样式了。 再来看图标。我们可以在组件文件夹里放一个 JPEG 图片，这个图片是用来给应用程序构建器或者体验生成器提供一个自定义图标的。注意，每个文件夹只能放一个这样的图标文件。 另外，我们还可以添加额外的 JS 文件，这些文件能帮助我们更好地结构化 UI 组件里的代码，也可以用来从 API 模块中共享代码。这样代码就更清晰、更容易维护了。 最后，别忘了测试。我们写的是 Jest 测试，测试文件的命名规则是 .test.js，而且必须放在 __tests__ 文件夹里面。这样 Salesforce 就知道这些是用来测试的文件了。 简单总结一下：.js-meta.html 配置文件是必选的，没有就报错；CSS 可选的，大小有限制，可以模块化共享；JPEG 图标每个文件夹一个；额外 JS 文件可以模块化代码；测试文件放在 __tests__ 里，命名要有 .test.js。这些就是组件的基本构成，大家记住了吗？