elm-webpack-starterに足したもの.md

elm-webpack-starterとても良い。
moarwick/elm-webpack-starter: Boilerplate for developing Elm apps on Webpack

以下付け足したもの

##babelとeslintと、flow type

npm install babel babel-cli babel-loader babel-core babel-preset-es2015 --save-dev
npm install babel-eslint babel-plugin-transform-flow-strip-types eslint eslint-loader flow-bin eslint-plugin-flowtype --save-dev

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-flow-strip-types"]
}

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.json]
indent_style = space

.eslintignore

webpack.config.js

.eslintrc

{
	"extends": [ "eslint:all",
                 "plugin:flowtype/recommended"],
  "parser": "babel-eslint",
  "plugins": ["flowtype"],

	"env": {
		"browser": true,
		"node": true,
		"amd": false,
		"mocha": false,
		"jasmine": false,
        "jquery" : true,
        "es6": true,
        "webextensions" : true
	},
	"ecmaFeatures": {},
	"globals": {
        "Elm": true
        },
	"rules": {

    "func-style": [2,"declaration"] ,
    "quote-props": ["error", "consistent"],
    "no-use-before-define": ["error", { "functions": false }],
    "no-console" : 0,
    "sort-vars" : 0

    },
  "parserOptions": {

    "sourceType": "module",

}
}

.flowconfig

[include]
./src/static/index.js

[ignore]
.*/dist/.*
.*/node_modules/.*
.*/elm-stuff/.*

[libs]
./lib

.webpack.config.jsに三箇所付け足す

    devtool: "source-map",


    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint'

        }
    ],
    
    ....

    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
    },
    
    ...
        new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
    }),

##elm-test

npm install -g elm-test
elm-test init

##material-design

npm install --save-dev material-design-icons material-design-lite

font.scss

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("~material-design-icons/iconfont/MaterialIcons-Regular.eot");
    /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), url("~material-design-icons/iconfont/MaterialIcons-Regular.woff2") format('woff2'), url("~material-design-icons/iconfont/MaterialIcons-Regular.woff") format('woff'), url("~material-design-icons/iconfont/MaterialIcons-Regular.ttf") format('truetype');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

// Rules for sizing the icon.
.material-icons.md-18 {
    font-size: 18px;
}
.material-icons.md-24 {
    font-size: 24px;
}
.material-icons.md-36 {
    font-size: 36px;
}
.material-icons.md-48 {
    font-size: 48px;
}

// Rules for using icons as black on a light background.
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}

// Rules for using icons as white on a dark background.
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}

main.scss

@import "./font";

$color-primary: $palette-indigo-500 !default;
$color-primary-dark: $palette-indigo-700 !default;
$color-accent: $palette-pink-A200 !default;