iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
0
Modern Web

學會Elm寫前端系列 第 17

17 使用webpack來打包elm

Elm and Webpack

大部分的時候,我們用elm-make打包好就好,可是如果我們這個前端還需要其他css或是js的套件要怎麼辦?一個個讀很麻煩,elm-package又只有elm的而已,有沒有什麼好方法可以連同elm一起打包?

當然有啊

就是前端常用的打包工具webpack了。不過因為這個不是webpack的教學,所以一些webpack的基本常識就先假定大家都知道了。覺得要自己手種設定webpack有點麻煩?沒關係,
elm-community有很貼心的有一個叫:elm-webpack-starter。幫忙大家把開始設定的問題給處理好。

git clone https://github.com/moarwick/elm-webpack-starter my-elm-project
cd my-elm-project
rm -rf .git         # on Windows: rmdir .git /s /q
git init
git add .
git commit -m 'first commit'
npm run reinstall

這樣就設定好啦,就有一個elm with webpack的app了!他還會有elm-webpack-loader
的設定,如果你要手動的話,記得要有 elm-webpack-lodaer才可能在webpack內用elm

create-elm-app

社群裡面,除了用webpack
之外的,還有一個可以號稱是zero-configuration,直接讓你開工的create-elm-app。他也有一些script是和官方的不一樣,不過我覺得也很方便。譬如你要安裝就是: elm-app install <package-name> 要安裝其他javascript就直接用npm,
他會放在這個app的package.json裡

    my-app/
    ├── .gitignore
    ├── README.md
    ├── elm-package.json
    ├── elm-stuff
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo.svg
    │   └── manifest.json
    ├── src
    │   ├── Main.elm
    │   ├── index.js
    │   ├── main.css
    │   └── registerServiceWorker.js
    └── tests
        ├── Tests.elm
        └── elm-package.json

這個是如果你用create-elm-app的話的tree。也有內建debugger和test。官方的指令也都有相對應的alias:
elm-app start, elm-app install, elm-app test, 還有一個是 elm-app build 可以把在production放在build的資料夾裡。

其實這個的背後也是使用webpack來整理assets的。你可以在 ~index.js~裡:

import './main.css'; // Tell Webpack to pick-up the styles from main.css

個人在使用上覺得比起webpack-starter,create-elm-app來得更直覺好用些。

還有很多其他的設定,建議可以因你的需求而做調整,詳情可以看 readme
。我覺得很多小細節都有整理好。


上一篇
16 用elm寫css
下一篇
18 elm 上使用websocket
系列文
學會Elm寫前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言