npm 包 hyperapp-starter 使用教程

概述

Hyperapp 是一个类 React 的轻量级前端框架，允许通过用纯函数处理状态和视图来构建应用。Hyperapp 是一个小巧但功能强大的包，易于学习和使用。hyperapp-starter 是 Hyperapp 的官方脚手架，它提供了一个构建 Hyperapp 应用程序的基本设置和开发工具。

在本文中，我们将详细讨论 hyperapp-starter 的使用方法，并提供有关构建 Hyperapp 应用程序的深入指导。

hyperapp-starter 的功能

预置了配置 Hyperapp 应用程序所需的各种设置，使开发工作更加简单
集成了 webpack 和 babel ，使部署更加容易
集成了 ESLint 和 Prettier ，以帮助开发者遵循最佳实践和编写更干净、更规范的代码
集成了 Jest 和 Enzyme ，可以轻松创建和运行单元测试

基本使用

安装 hyperapp-starter

--- ------- -- ----------------

初始化 Hyperapp 应用程序

-------- ---- -----

上面的命令将在当前目录下创建一个名为 myapp 的新目录，并将其设置为 Hyperapp 应用程序的根目录。

在 myapp 目录中，运行以下命令来启动开发服务器：

-- -----
--- -----

运行上述命令后，Hyperapp 应用程序将在 http://localhost:8080 中启动。你可以通过编辑 myapp/src/index.js 文件来修改应用程序，并在浏览器中实时显示更改。

高级使用

文件结构

在 hyperapp-starter 中，所有的源代码都存储在 src 目录下，这样你就可以轻松地为你的应用程序添加模块化组织。该项目文件结构如下：

------
  --- -------------
  --- -------
  -   --- ----------
  -   --- -----------
  --- ----
  -   --- ----
  -   -   --- ----------
  -   -   --- --------
  -   -   --- --------
  -   --- -----------
  -   -   --- ----------
  -   -   --- --------
  -   --- ---------
  -   --- --------
  --- --------
  --- -------------
  --- --------------
  --- ----------
  --- --------------
  --- ------------
  --- ---------
  --- -----------------

配置

hyperapp-starter 提供了一些配置，可以在 myapp 目录下的 webpack.config.js 文件中修改。你可以根据你的需要进行更改，并查看 Hyperapp 官方文档，进一步了解如何更改 webpack 配置。

编写组件

在 Hyperapp 中，你可以使用组件来管理界面中的不同部分。Hyperapp 组件本质上就是一个函数，它的输入是组件所需的数据(或称为props)，其输出是一个视图。Hyperapp 组件很简单，这也是它如此流行的原因之一。

下面是一个基本的 Hyperapp 组件样例：

-- -----------------------
------ - - - ---- ----------

------ ------- ------- --
  ------- - ------ -------------- -- ------- ----------------

在上面的组件中，props 是一个对象，其中包含组件所需的数据。该组件使用了 Hyperapp 的 hyperscript API 中的 h() 函数来渲染一个

元素。

状态管理

在 Hyperapp 中，你可以使用状态管理来管理应用程序的各个部分。Hyperapp 中的状态是一个对象，其中包含组件所需的所有数据。

下面是一个简单的 Hyperapp 应用程序状态管理的例子：

-- ----------------
------ ------- -
  ------ --
  -------- ------- -------
-

在上面的代码中，我们定义了一个名为 state 的对象，它包含两个属性：count 和 message。

我们可以在应用程序的其他部分中使用这个状态，如下所示：

-- -------------------------
------ - - - ---- ----------

------ ------- -- ------ ------- -- --
  -------- --- -
    ------ --- ------- -----------
    ----------- - -------- ----------------- -- -----
    ----------- - -------- ----------------- -- ----
  --

在上面的代码中，我们接收了一个名为 count 的属性，其值从应用程序状态中而来。我们还接收了一个名为 actions 的属性，其中包含一些操作来更新状态。

添加新路由

在 Hyperapp 应用程序中添加新页面，你需要为页面定义一个新路由。Hyperapp-starter 中使用的是 hyperapp-router 库，可以为应用程序添加路由。

Hyperapp Router 提供了用于定义路由的组件以及可用于创建超链接的组件。

下面是一个简单的 Hyperapp 应用程序的路由定义示例：

-- ------------
------ - --- - ---- ----------
------ - ----- ----- - ---- ------------------
------ ----- ---- -------------
------ ------- ---- ---------------
------ ------- ---- ----------------------
------ ----- ---- --------------------
------ -------------

----- ---- - ------- -------- --
  -------- --- -
    -------- --- -
      ------- - --- --- -- --------
      ------- - --- ---------- -- ----------
    ---
    -------- - ----- --- -- -------
    -------- - ----- ---------- -- --------
  --

----- ---- - ---------- -------- ----- --------------

在上面的代码中，我们导入了 Link 和 Route 组件，它们被用来定义应用程序的不同页面。Link 组件用于在不同路由之间进行导航，而 Route 组件用于将应用程序状态映射到页面组件。

运行测试

hyperapp-starter 使用 Jest 和 Enzyme 来测试 Hyperapp 应用程序。

使用 Jest 运行测试，可以在 myapp 目录下运行以下命令：

--- ----

默认情况下，该命令将执行所有位于 test 目录下的测试脚本。

致谢

感谢你阅读了本文，希望它能够对 Hyperapp 的学习和使用有所帮助。如果你在使用 hyperapp-starter 过程中遇到了问题，可以查看 Hyperapp 官方文档，了解更多信息。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/60065f81238a385564ab6b61