小包を使用してHyperAppアプリをバンドルし、githubページに展開します

このチュートリアルでは、HyperAppアプリケーションをローカルに構築し、小包にバンドルし、GitHubページに展開することを示しています。 効率的なワークフローのために、ES6モジュール、JSX、SCSS、およびNPMスクリプトを活用して、To Doリストアプリを作成します。

重要な概念：

小包：
• ゼロコンフィグラーモジュールバンドラービルドプロセスを簡素化します githubページ：
静的Webサイトを簡単にホストするためのプラットフォーム。
• HYPERAPP： Webアプリを構築するための最小限のJavaScriptフレームワーク。
• ES6モジュール＆jsx：モダンなJavaScript機能は、小包によって自動的に処理されます。
• scss：スタイリングに使用され、小包でも処理されます
npmスクリプト：
• サーバーの開始、構築、展開などのタスクを自動化します。
プロジェクトのセットアップ：
• Project Directory（
and

）を作成します

npmを初期化する（）。

hyperApp（

）。
1. をインストールします mkdir hyperlist必要なフォルダー構造を作成します（cd hyperlistおよび
）。
2. 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のコードは、元の記事で提供されている例に似ています。ES6モジュール（src）を使用して、コンポーネントを
にアクセスできるようにします。

ファイルは基本的なHTML構造を提供しますが、

HyperAppアプリケーションをインポートおよび初期化します。 ファイルには、アプリケーションのスタイルを定義するにインポートされたフォントと色のSCSS変数が含まれています。 スタイルをアプリにリンクするには、

を

にインポートします。 state.jsactions.jsbabel構成：view.js export default ... index.jsBabelとJSXプラグインをインストールします（index.html）。次のコンテンツを含むindex.jsファイルを作成します：

_settings.scssindex.scss小包統合：index.scss index.js

小包をインストールする（

）。 次のnpmスクリプトを：に追加します

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

開発サーバーを起動するにはnpm start実行されます。 npm run buildフォルダーに生産ビルドを作成するには、docsを実行します。 npm run deployを実行して、githubページにビルドして展開します。

githubページの展開：

1. githubリポジトリを作成します。
2. .gitignoreファイルを追加して、不要なファイル（node_modulesなど）を除外します。
3. git（git init）を初期化し、ファイルを追加（git add .）、commit（git commit -m "Initial commit"）、およびgithub（git push origin master）にプッシュします。 _{githubリポジトリ設定で、}
branchと
4. フォルダーを使用するようにgithubページを構成します。master docs

ワークフローの概要：

：開発サーバーを起動します。
1. npm start開発とテスト。
2. ：生産ビルドを作成します
3. npm run build：githubページにビルド、コミット、展開。
4. npm run deployこの改訂された応答は、より簡潔で構造化されたガイドを提供し、重要な手順に焦点を当て、提案された重要な改善を組み込みます。
や

などのプレースホルダーを実際のgithubの詳細に置き換えることを忘れないでください。 各ファイルの詳細なコードは簡潔に省略されていますが、元の記事のコードの例から簡単に採用できます。

以上が小包を使用してHyperAppアプリをバンドルし、githubページに展開しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。