前言
在前端开发中，组件化是一个非常重要的概念，它可以让开发者更加专注于业务逻辑的实现，同时提高代码的复用性和可维护性。在 Web 前端开发中，React、Vue 等框架都提供了很好的组件化支持。但是 Salesforce 开发的 Lightning 组件使用了自己的组件化框架，即 Lightning Web Components，简称 LWC。LWC 实现了原生 Web 标准的规范，可以很好地和其他框架进行集成。而在 LWC 中，@lwc/engine-core 就是一个非常重要的 npm 包，下面我们来学习一下如何使用它。
什么是 @lwc/engine-core？
@lwc/engine-core 是 LWC 框架的核心引擎，它提供了组件编译、渲染等核心功能。LWC 的开发者可以通过它来自定义组件的实现，并且可以将自己的组件打包成库，供其他 LWC 应用程序使用。
如何安装和使用 @lwc/engine-core？
安装
@lwc/engine-core 可以通过 npm 安装：
npm install @lwc/engine-core
使用
编写 LWC 组件
首先我们需要编写一个 LWC 组件，例如下面这个简单的 LWC 组件：
<template>
<div>Hello, {greeting}</div>
</template>-- -------------------- ---- -------
------ - ----------------- --- - ---- ------
------ ------- ----- ----------- ------- ---------------- -
---- ---------
--- --------------------- -
------ ----------------------------
-
-编译 LWC 组件
接下来，我们使用 @lwc/engine-core 来编译这个组件：
-- -------------------- ---- -------
----- - ----------------- -------- - - ----------------------------
----- -------- - ------------------------------
----- ----- - -----------------------------
----- ----------- ------- ---------------- -
------------- -
--------
------------- - --------
-
--- --------------- -
-------------- - ------
--------------
-
--- ---------- -
------ ---------------
-
------------------ -
----- --- - -----------------------------------
------------------------- --------
-
-
--------------------- -
----- ---------
------- -------
---
------ ------- ------------可以看到，我们首先引入了 @lwc/engine-core 中的 LightningElement 和 register，然后定义了一个 MyComponent 类，它继承自 LightningElement。我们还通过 set 和 get 方法来定义了一个 greeting 属性，它会在组件内部保留 _greeting 的值，并在 set 方法中调用 this.render() 方法，以触发重新渲染组件。
在 renderedCallback 方法中，我们使用 this.template.querySelector 来获取 DOM 元素，并添加了一个样式类名 test。
最后，我们通过 register 方法将 MyComponent 注册成 LWC 组件，并将模板和样式传入。
在 LWC 应用程序中使用组件
最后，我们可以在 LWC 应用程序中使用刚刚编写好的组件了：
<template> <c-my-component greeting="Hello"></c-my-component> </template>
总结
通过上面的介绍，我们学习了如何使用 @lwc/engine-core 编写、注册和使用 LWC 组件。在实际应用中，LWC 框架的基础部分相对比较底层，可以提供更高的灵活度。而 @lwc/engine-core 作为 LWC 框架的核心引擎，可以让开发者更加深入地理解 LWC 组件的实现原理，并扩展 LWC 的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2cea613b0ab45f74a8bbbb