오픈 소스 모험: 에피소드 22: Imba 2 및 GitHub 페이지

7178 단어 javascriptimba
이전 두 에피소드에서 Imba 2에 두 개의 앱을 이식했지만 로컬에서 확인하지 않으면 볼 수 없습니다.

다행스럽게도 정적 앱의 경우 GitHub 페이지를 사용하기가 매우 쉽고 이전에 다른 많은 프로젝트에서 사용했으므로 시작하겠습니다.

GitHub 페이지 설치


imba2-rotn(에피소드 20) 및 imba2-matrix-rain(에피소드 21)에 대해 동일한 단계를 수행합니다.

먼저 npm i --save-dev gh-pages가 필요합니다.

그런 다음 package.json에 두 개의 명령을 추가할 수 있습니다. 하나는 predeploy용이고 다른 하나는 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 . 에 imba build 를 추가하여 해결할 수 있지만 __assets__ 의 아무 것도 배포되지 않기 때문에 여전히 앱이 작동하지 않습니다.

지킬 끄기



기본적으로 GitHub Pages는 실제로 필요하지 않더라도 Jekyll로 작업을 처리합니다. 그리고 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 및 Matrix Rain App here 을 볼 수 있습니다.

다음에 온다



다음 몇 개의 에피소드에서는 Imba 1 앱을 몇 개 더 Imba 2로 이식한 다음 Imba 상황에 대한 제 생각을 요약하겠습니다.
Hubspot에서 무작위 기사 목록을 만드는 방법
재료 UI - 그리드 레이아웃

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage