使用包裹将HyperApp应用程序捆绑并部署到GitHub页面

>本教程演示了本地构建HyperApp应用程序，将其与包裹捆绑在一起，并将其部署到GitHub页面。 我们将创建一个待办事项列表应用程序，利用ES6模块，JSX，SCSS和NPM脚本以进行有效的工作流程。

密钥概念：

• >包裹：>零符合模块bundler简化了构建过程。>
• > github页面：一个容易托管静态网站的平台。
• hyperapp：一个用于构建Web应用程序的最小JavaScript框架。
eS6模块＆JSX：
• 现代JavaScript功能由包裹自动处理。
> scss：
• 用于样式，也由包裹处理。 npm脚本：
自动化任务，例如启动服务器，构建和部署。
设置项目：

> 创建一个project目录（

和

）。
1. > mkdir hyperlist>初始化npm（cd hyperlist）。
2. >安装hyperapp（npm init）。
3. 创建必要的文件夹结构（npm install --save hyperapp和
）。
4. >在mkdir -p src/js>目录中创建以下文件：src/scss>，
，
5. 。 src/js在state.js>目录中创建以下文件：actions.js，view.js。
>。
6. 创建src/scss和index.scss在_settings.scss>目录中。
>
7. index.html index.js添加代码：src
>

>，

的代码将类似于原始文章中提供的示例，利用ES6模块（）使组件可访问>。 该文件提供了基本的HTML结构，而

>导入并初始化了HyperApp应用程序。

state.js文件包含导入到actions.js的字体和颜色的SCSS变量，该变量定义了应用程序样式。 导入到view.js中，将样式链接到应用程序。export default ...> index.jsindex.html> babel配置：index.js

安装babel和JSX插件（_settings.scss）。使用以下内容创建一个index.scss>文件：index.scss> index.js

包裹集成：

>安装包裹（

）。 将以下NPM脚本添加到您的npm install --save babel-plugin-transform-react-jsx babel-preset-env>：.babelrc>

{
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}

>运行npm start启动开发服务器。 运行npm run build以在docs>文件夹中创建生产构建。 运行npm run deploy以构建并部署到github页面。

> github页面部署：

创建一个github存储库。
>添加一个
2. 文件以排除不必要的文件（node_modules等）。 .gitignore>初始化git（
），添加文件（
3. ），commit（git init），然后推到github（git add .）。 git commit -m "Initial commit"在您的github存储库设置中，配置github页面以使用git push origin masterbranch和
>文件夹。
4. 。 master docs
>工作流程摘要：

：启动开发服务器。

1. 开发和测试。npm start
2. ：创建生产构建。
3. npm run build：构建，提交和部署到github页面。
>
4. npm run deploy>这种修订后的响应提供了更简洁，更结构化的指南，重点介绍了基本步骤并纳入了建议的关键改进。 请记住，用您的实际github详细信息将占位符替换为
和

。 为简洁而省略了每个文件的详细代码，但可以轻松地从原始文章的代码示例中进行调整。

以上是使用包裹将HyperApp应用程序捆绑并部署到GitHub页面的详细内容。更多信息请关注PHP中文网其他相关文章！