概述
Hyperapp 是一个类 React 的轻量级前端框架，允许通过用纯函数处理状态和视图来构建应用。Hyperapp 是一个小巧但功能强大的包，易于学习和使用。hyperapp-starter 是 Hyperapp 的官方脚手架，它提供了一个构建 Hyperapp 应用程序的基本设置和开发工具。
在本文中，我们将详细讨论 hyperapp-starter 的使用方法，并提供有关构建 Hyperapp 应用程序的深入指导。
hyperapp-starter 的功能
- 预置了配置 Hyperapp 应用程序所需的各种设置，使开发工作更加简单
- 集成了 webpack 和 babel ，使部署更加容易
- 集成了 ESLint 和 Prettier ，以帮助开发者遵循最佳实践和编写更干净、更规范的代码
- 集成了 Jest 和 Enzyme ，可以轻松创建和运行单元测试
基本使用
安装 hyperapp-starter
npm install -g hyperapp-starter
初始化 Hyperapp 应用程序
hyperapp init myapp
上面的命令将在当前目录下创建一个名为 myapp 的新目录，并将其设置为 Hyperapp 应用程序的根目录。
在 myapp 目录中，运行以下命令来启动开发服务器：
cd myapp npm start
运行上述命令后，Hyperapp 应用程序将在 http://localhost:8080 中启动。你可以通过编辑 myapp/src/index.js 文件来修改应用程序，并在浏览器中实时显示更改。
高级使用
文件结构
在 hyperapp-starter 中，所有的源代码都存储在 src 目录下，这样你就可以轻松地为你的应用程序添加模块化组织。该项目文件结构如下：
-- -------------------- ---- ------- ------ --- ------------- --- ------- - --- ---------- - --- ----------- --- ---- - --- ---- - - --- ---------- - - --- -------- - - --- -------- - --- ----------- - - --- ---------- - - --- -------- - --- --------- - --- -------- --- -------- --- ------------- --- -------------- --- ---------- --- -------------- --- ------------ --- --------- --- -----------------
配置
hyperapp-starter 提供了一些配置，可以在 myapp 目录下的 webpack.config.js 文件中修改。你可以根据你的需要进行更改，并查看 Hyperapp 官方文档，进一步了解如何更改 webpack 配置。
编写组件
在 Hyperapp 中，你可以使用组件来管理界面中的不同部分。Hyperapp 组件本质上就是一个函数，它的输入是组件所需的数据(或称为props)，其输出是一个视图。Hyperapp 组件很简单，这也是它如此流行的原因之一。
下面是一个基本的 Hyperapp 组件样例：
// src/components/hello.js
import { h } from 'hyperapp'
export default (props) =>
h('h1', { class: 'good-morning' }, `Hello, ${props.name}!`)在上面的组件中，props 是一个对象，其中包含组件所需的数据。该组件使用了 Hyperapp 的 hyperscript API 中的 h() 函数来渲染一个
元素。
状态管理
在 Hyperapp 中，你可以使用状态管理来管理应用程序的各个部分。Hyperapp 中的状态是一个对象，其中包含组件所需的所有数据。
下面是一个简单的 Hyperapp 应用程序状态管理的例子：
// src/app/state.js
export default {
count: 0,
message: 'Hello, World!'
}在上面的代码中，我们定义了一个名为 state 的对象，它包含两个属性：count 和 message。
我们可以在应用程序的其他部分中使用这个状态，如下所示：
-- -------------------- ---- -------
-- -------------------------
------ - - - ---- ----------
------ ------- -- ------ ------- -- --
-------- --- -
------ --- ------- -----------
----------- - -------- ----------------- -- -----
----------- - -------- ----------------- -- ----
--在上面的代码中，我们接收了一个名为 count 的属性，其值从应用程序状态中而来。我们还接收了一个名为 actions 的属性，其中包含一些操作来更新状态。
添加新路由
在 Hyperapp 应用程序中添加新页面，你需要为页面定义一个新路由。Hyperapp-starter 中使用的是 hyperapp-router 库，可以为应用程序添加路由。
Hyperapp Router 提供了用于定义路由的组件以及可用于创建超链接的组件。
下面是一个简单的 Hyperapp 应用程序的路由定义示例：
-- -------------------- ---- -------
-- ------------
------ - --- - ---- ----------
------ - ----- ----- - ---- ------------------
------ ----- ---- -------------
------ ------- ---- ---------------
------ ------- ---- ----------------------
------ ----- ---- --------------------
------ -------------
----- ---- - ------- -------- --
-------- --- -
-------- --- -
------- - --- --- -- --------
------- - --- ---------- -- ----------
---
-------- - ----- --- -- -------
-------- - ----- ---------- -- --------
--
----- ---- - ---------- -------- ----- --------------
在上面的代码中，我们导入了 Link 和 Route 组件，它们被用来定义应用程序的不同页面。Link 组件用于在不同路由之间进行导航，而 Route 组件用于将应用程序状态映射到页面组件。
运行测试
hyperapp-starter 使用 Jest 和 Enzyme 来测试 Hyperapp 应用程序。
使用 Jest 运行测试，可以在 myapp 目录下运行以下命令：
npm test
默认情况下，该命令将执行所有位于 test 目录下的测试脚本。
致谢
感谢你阅读了本文，希望它能够对 Hyperapp 的学习和使用有所帮助。如果你在使用 hyperapp-starter 过程中遇到了问题，可以查看 Hyperapp 官方文档，了解更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f81238a385564ab6b61