간토에서 가장 빠른 Elm+JS 앱 개발 환경 만들기
parcel
Webpack에서 설정 파일을 망치면 평생 끝나지 않습니다. 가장 빨리 만들려면 parcel 선택입니다.
parcel 소개$ mkdir yourapp
$ npm init
$ npm install -D parcel-bundler
npm으로 공개하지 않으면 아래와 같이 private 플래그를 true로 해 두면 필드가 줄일 수 있어 편합니다
parcel 설치까지 완료한 package.json{
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"parcel-bundler": "^1.11.0"
}
}
Elm 구현
먼저 간단한 Elm 앱을 구현합니다. src 디렉토리를 자르고 App.elm 를 만듭니다. 여기서는 0.19를 사용한다고 가정합니다.
src/App.elmmodule App exposing (..)
import Browser
import Html exposing (Html, div, input, text)
import Html.Events exposing (onInput)
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model =
{ value : String
}
init : Model
init =
{ value = "type something below"
}
-- UPDATE
type Msg
= UpdateModel String
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateModel value ->
{ model | value = value }
-- VIEW
view : Model -> Html Msg
view model =
div []
[ div [] [ text model.value ]
, input [ onInput UpdateModel ] []
]
JS 구현
index.js를 만드십시오. parcel을 사용하고 있으므로 JS 측에서 직접 Elm을 require 할 수 있습니다.
index.jsconst { Elm } = require("./src/App.elm")
const app = Elm.App.init({
node: document.getElementById('main')
})
HTML 구현
마지막으로 HTML을 만듭니다.index.js 와 같은 계층구조에 index.html 를 다음의 내용으로 둡시다.
index.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YourApp</title>
</head>
<body>
<div id="main"></div>
<script src="./index.js"></script>
</body>
</html>
시작
start 및 build를 명령으로 추가하십시오.test 는 일단 필요 없기 때문에 지워 버립니다.
{
"private": true,
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "parcel index.html --out-dir dist",
+ "build": "parcel build index.html --out-dir dist"
},
"devDependencies": {
"parcel-bundler": "^1.11.0"
}
}
그리고는 다음을 실행하면 기동할 수 있습니다.
부팅과 동시에 node-elm-compiler 설치가 수행됩니다.
$ npm start
기본 설정이면 localhost:1234에 액세스하면 다음 화면을 볼 수 있습니다.
Reference
이 문제에 관하여(간토에서 가장 빠른 Elm+JS 앱 개발 환경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/IzumiSy/items/4aff1db5c773c48ef50b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ mkdir yourapp
$ npm init
$ npm install -D parcel-bundler
{
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"parcel-bundler": "^1.11.0"
}
}
먼저 간단한 Elm 앱을 구현합니다.
src 디렉토리를 자르고 App.elm 를 만듭니다. 여기서는 0.19를 사용한다고 가정합니다.src/App.elm
module App exposing (..)
import Browser
import Html exposing (Html, div, input, text)
import Html.Events exposing (onInput)
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model =
{ value : String
}
init : Model
init =
{ value = "type something below"
}
-- UPDATE
type Msg
= UpdateModel String
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateModel value ->
{ model | value = value }
-- VIEW
view : Model -> Html Msg
view model =
div []
[ div [] [ text model.value ]
, input [ onInput UpdateModel ] []
]
JS 구현
index.js를 만드십시오. parcel을 사용하고 있으므로 JS 측에서 직접 Elm을 require 할 수 있습니다.
index.jsconst { Elm } = require("./src/App.elm")
const app = Elm.App.init({
node: document.getElementById('main')
})
HTML 구현
마지막으로 HTML을 만듭니다.index.js 와 같은 계층구조에 index.html 를 다음의 내용으로 둡시다.
index.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YourApp</title>
</head>
<body>
<div id="main"></div>
<script src="./index.js"></script>
</body>
</html>
시작
start 및 build를 명령으로 추가하십시오.test 는 일단 필요 없기 때문에 지워 버립니다.
{
"private": true,
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "parcel index.html --out-dir dist",
+ "build": "parcel build index.html --out-dir dist"
},
"devDependencies": {
"parcel-bundler": "^1.11.0"
}
}
그리고는 다음을 실행하면 기동할 수 있습니다.
부팅과 동시에 node-elm-compiler 설치가 수행됩니다.
$ npm start
기본 설정이면 localhost:1234에 액세스하면 다음 화면을 볼 수 있습니다.
Reference
이 문제에 관하여(간토에서 가장 빠른 Elm+JS 앱 개발 환경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/IzumiSy/items/4aff1db5c773c48ef50b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const { Elm } = require("./src/App.elm")
const app = Elm.App.init({
node: document.getElementById('main')
})
마지막으로 HTML을 만듭니다.
index.js 와 같은 계층구조에 index.html 를 다음의 내용으로 둡시다.index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YourApp</title>
</head>
<body>
<div id="main"></div>
<script src="./index.js"></script>
</body>
</html>
시작
start 및 build를 명령으로 추가하십시오.test 는 일단 필요 없기 때문에 지워 버립니다.
{
"private": true,
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "parcel index.html --out-dir dist",
+ "build": "parcel build index.html --out-dir dist"
},
"devDependencies": {
"parcel-bundler": "^1.11.0"
}
}
그리고는 다음을 실행하면 기동할 수 있습니다.
부팅과 동시에 node-elm-compiler 설치가 수행됩니다.
$ npm start
기본 설정이면 localhost:1234에 액세스하면 다음 화면을 볼 수 있습니다.
Reference
이 문제에 관하여(간토에서 가장 빠른 Elm+JS 앱 개발 환경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/IzumiSy/items/4aff1db5c773c48ef50b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"private": true,
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "parcel index.html --out-dir dist",
+ "build": "parcel build index.html --out-dir dist"
},
"devDependencies": {
"parcel-bundler": "^1.11.0"
}
}
$ npm start
Reference
이 문제에 관하여(간토에서 가장 빠른 Elm+JS 앱 개발 환경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/IzumiSy/items/4aff1db5c773c48ef50b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
