オープンソースの冒険:エピソード22:Imba

6961 ワード
javascript imba テキストリンク
以前の2つのエピソードでは、私は2つのアプリをImba 2に移植しました、しかし、あなたがローカルにそれらをチェックしない限り、あなたは彼らを見ることができません.
幸いなことに静的アプリのためにそれは非常にgithubページを使用して簡単です、私は他のプロジェクトの多くの前にそれを使用したので、始めましょう.

ページをインストール


私は同じ手順を行いますimba2-rotn (エピソード20)imba2-matrix-rain (エピソード21)
まず最初にnpm i --save-dev gh-pages .
次に、2つのコマンドをpackage.json , 一つpredeploy と1つdeploy :
{
  "name": "imba2-rotn",
  "scripts": {
    "start": "imba -w server.imba",
    "build": "imba build server.imba",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist/public"
  },
  "dependencies": {
    "express": "^4.17.1",
    "imba": "^2.0.0-alpha.199"
  },
  "devDependencies": {
    "gh-pages": "^3.2.3"
  }
}
ランnpm run deploy , そして、それはほとんど働きます..

絶対パス


IMBA 2はデフォルトでは生成されたHTMLの相対パスではなく絶対値を使用します.
これ
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imba 2 ROT-N</title>
    <!-- reference to the client script styles -->
    <style src='*'></style>
  </head>
  <body>
    <!-- reference to the client script -->
    <script type="module" src="./client.imba"></script>
  </body>
</html>
これになります.
<html lang="en">
  <head><!--$head$-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imba 2 ROT-N</title>
    <!-- reference to the client script styles -->
    <link rel='stylesheet' href='/__assets__/all-TX3M4ICJ.css'>
  </head>
  <body><!--$body$-->
    <!-- reference to the client script -->
    <script type="module" src='/__assets__/app/client-5O71BJHW.js'></script>
  </body>
</html>
これは--baseurl . to imba build , しかし、アプリはまだ動作しません__assets__ も展開されます.

ジキルをオフにする


デフォルトではGithubページはJekyllを使って処理されます.たとえ実際にそれを必要としないとしても.ジキルは含まれません__assets__ デフォルトディレクトリ.
私も-H ハッシュベースの名前を無効にするには、実際にこの問題をデバッグする方法で取得し、これらのいずれかの近代的なブラウザに必要はありません.
多くの変更ラテン語、ここで最終的ですpackage.json :
{
  "name": "imba2-rotn",
  "scripts": {
    "start": "imba -w server.imba",
    "build": "imba build -H --baseurl . server.imba",
    "predeploy": "npm run build && touch dist/public/.nojekyll",
    "deploy": "gh-pages -d dist/public --dotfiles"
  },
  "dependencies": {
    "express": "^4.17.1",
    "imba": "^2.0.0-alpha.199"
  },
  "devDependencies": {
    "gh-pages": "^3.2.3"
  }
}

配備アプリ


見ることができるROT-N app here and Matrix Rain App here .

今度来る


次のいくつかのエピソードでは、私はImba 2にいくつかのより多くのImbaのアプリをポートしようとしますし、私はImba状況についての私の考えをまとめて推測します.
Vue.jsでEnumのようなモノを作る
グリッドのレイアウト