npm install
elm-package install
npm start
| node_modules | |
| elm-stuff |
| { | |
| "version": "1.0.0", | |
| "summary": "helpful summary of your project, less than 80 characters", | |
| "repository": "https://github.com/user/project.git", | |
| "license": "BSD3", | |
| "source-directories": [ | |
| "." | |
| ], | |
| "exposed-modules": [], | |
| "dependencies": { | |
| "elm-lang/core": "5.1.1 <= v < 6.0.0", | |
| "elm-lang/html": "2.0.0 <= v < 3.0.0", | |
| "elm-lang/svg": "2.0.0 <= v < 3.0.0" | |
| }, | |
| "elm-version": "0.18.0 <= v < 0.19.0" | |
| } |
| body { | |
| margin: 0; | |
| } |
| <!--index.html--> | |
| <html> | |
| <head> | |
| <title>ELM Counter</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| <div id="elm-target"></div> | |
| <script async src="app.js"></script> | |
| </body> | |
| </html> |
| // index.js | |
| 'use strict'; | |
| // include main style | |
| require('./index.css'); | |
| // initialize Elm Application | |
| const Elm = require('./src/Main.elm'); | |
| const mountNode = document.getElementById('elm-target'); | |
| // The third value on embed are the initial values for incomming ports into Elm | |
| const app = Elm.Main.embed(mountNode); |
| module Main exposing (main) | |
| import Html | |
| type Msg | |
| = Add Int | |
| type alias Model = Int | |
| init : ( Model, Cmd Msg ) | |
| init = ( 0, Cmd.none ) | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = | |
| Sub.none | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Add n -> ( model + n, Cmd.none ) | |
| view : Model -> Html.Html Msg | |
| view model = | |
| Html.span [] [ Html.text ("Sum is " ++ toString model) ] | |
| main : Program Never Model Msg | |
| main = | |
| Html.program | |
| { init = init | |
| , view = view | |
| , subscriptions = subscriptions | |
| , update = update | |
| } |
| { | |
| "name": "my-package", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "dependencies": { | |
| "webpack": "^3.11.0" | |
| }, | |
| "devDependencies": { | |
| "webpack-dev-server": "^2.11.1", | |
| "css-loader": "^0.28.10", | |
| "elm-webpack-loader": "^4.4.0", | |
| "style-loader": "^0.20.2" | |
| }, | |
| "scripts": { | |
| "start": "./node_modules/.bin/webpack-dev-server", | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "repository": { | |
| "type": "git", | |
| "url": "git+https://github.com/user/package.git" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "bugs": { | |
| "url": "https://github.com/user/package/issues" | |
| }, | |
| "homepage": "https://github.com/user/package#readme" | |
| } |
| // webpack.config.js | |
| module.exports = { | |
| entry: { | |
| app: [ | |
| './index.js' | |
| ] | |
| }, | |
| output: { | |
| filename: '[name].js', | |
| }, | |
| module: { | |
| loaders: [ | |
| { | |
| test: /\.elm$/, | |
| exclude: [/elm-stuff/, /node_modules/], | |
| use : { | |
| loader: 'elm-webpack-loader', | |
| options: { | |
| verbose: true, warn: true | |
| } | |
| } | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: [ 'style-loader', 'css-loader' ] | |
| } | |
| ], | |
| noParse: /\.elm$/, | |
| }, | |
| devServer: { | |
| inline: true, | |
| stats: { colors: true }, | |
| } | |
| }; |