使用包裹將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中文網其他相關文章！