설치

CDN 및 온라인 플레이그라운드

JavaScript를 처음 접하거나 간단하게 시작하고 싶다면 CDN(콘텐츠 전송 네트워크)을 통해 Mithril.js를 사용할 수 있습니다.

html

<script src="https://unpkg.com/mithril/mithril.js"></script>

로컬 환경 설정 없이 Mithril.js를 사용해 보려면 flems.io/mithril에서 제공하는 온라인 플레이그라운드를 이용하면 됩니다.

npm

bash

$ npm install mithril

TypeScript 타입 정의는 DefinitelyTyped에서 제공됩니다. 다음 명령어로 설치할 수 있습니다.

bash

$ npm install @types/mithril --save-dev

로컬 프로젝트 생성

기존 Mithril.js 시작 템플릿을 활용하여 프로젝트를 시작할 수 있습니다.

예를 들어 mithril-esbuild-starter로 시작하려면 다음 명령을 실행합니다.

bash

# 원하는 디렉토리에 템플릿을 복제합니다.
npx degit kevinfiol/mithril-esbuild-starter hello-world

# 생성된 프로젝트 디렉토리로 이동합니다.
cd ./hello-world/

# 의존성 패키지를 설치합니다.
npm install

# 앱을 빌드하고 변경 사항을 감지하여 자동으로 다시 빌드합니다.
npm run dev

esbuild를 이용한 빠른 시작

esbuild 관련 문서는 여기에서 확인할 수 있습니다.

디렉토리를 npm 패키지로 초기화합니다.

bash

$ npm init --yes

필요한 도구를 설치합니다.

bash

$ npm install mithril
$ npm install esbuild --save-dev

package.json 파일의 scripts 섹션에 "start" 항목을 추가합니다.

json

{
  "...": "...",
  "scripts": {
    "start": "esbuild index.js --bundle --outfile=bin/main.js --watch"
  }
}

JSX를 사용하려면 esbuild와 함께 --jsx-factory 및 --jsx-fragment 플래그를 추가할 수 있습니다.

json

{
  "...": "...",
  "scripts": {
    "start": "esbuild index.js --bundle --outfile=bin/main.js --jsx-factory=m --jsx-fragment='\"[\"' --watch"
  }
}

index.js 파일을 생성합니다.

javascript

import m from 'mithril';
m.render(document.getElementById('app'), 'hello world');

index.html 파일을 생성합니다.

html

<!DOCTYPE html>
<body>
  <div id="app"></div>
  <script src="bin/main.js"></script>
</body>

번들러를 실행합니다.

bash

$ npm run start

브라우저에서 index.html 파일을 엽니다. 페이지에 hello world 텍스트가 표시됩니다.

설치 ​

CDN 및 온라인 플레이그라운드 ​

npm ​

로컬 프로젝트 생성 ​

esbuild를 이용한 빠른 시작 ​

설치

CDN 및 온라인 플레이그라운드

npm

로컬 프로젝트 생성

esbuild를 이용한 빠른 시작