Xóa bài viết
Bạn có chắc chắn muốn xóa bài viết này không ?
Xóa bình luận
Bạn có chắc chắn muốn xóa bình luận này không ?
Setup project Elm với Webpack
Note lại cho khỏi quên, không viết lách gì nhiều.
# Khởi tạo project
$ mkdir my-elm-project
$ cd my-elm-project
$ yarn init .
Cài packages:
# Cài webpack
$ yarn add webpack webpack-cli webpack-dev-server
# Cài các loader liên quan
$ yarn add elm-webpack-loader css-loader sass-loader style-loader node-sass file-loader url-loader
Cấu trúc thư mục dự án:
my-elm-project
├── package.json
├── src
│ ├── Main.elm
│ ├── Models.elm
│ ├── Views.elm
│ ├── index.html
│ ├── main.js
│ └── style.scss
├── webpack.config.js
└── elm-package.json
Trong đó, nội dung các file như sau:
elm-package.json
{
"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": [
"src"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
src/index.html
<!DOCTYPE html>
<html>
<head>
<title>Elm Project</title>
</head>
<body>
<div id="root"></div>
<script src="dist.js"></script>
</body>
</html>
src/main.js
require('./index.html');
require('./style.scss');
const Elm = require('./Main.elm');
Elm.Main.embed(document.getElementById("root"));
Nội dung các file .elm là tùy vào bạn. Lưu ý cách chia module mình thường dùng là Model nằm trong một file, toàn bộ các View nằm trong một file, và Main file chỉ để làm entry point, ví dụ:
src/Models.elm
module Models exposing (..)
type Msg = NoOp
type alias Model = Int
src/Views.elm
module Views exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Models exposing (..)
dummyView : Html Msg
dummyView =
div [] [ text "Hello World" ]
src/Main.elm
module Main exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Models exposing (..)
import Views exposing (..)
model : Model
model = 0
update : Msg -> Model -> Model
update msg model =
case msg of
NoOp -> model
view : Model -> Html Msg
view model =
dummyView
main : Program Never Model Msg
main = Html.beginnerProgram
{ model = model
, view = view
, update = update
}
Cuối cùng, và quan trọng nhất, là file config Webpack:
webpack.config.js
var path = require('path');
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname + '/dist'),
filename: 'dist.js'
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]'
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader?verbose=true&warn=true'
}
],
noParse: /\.elm$/,
},
devServer: {
inline: true,
stats: { colors: true }
}
};
Run project bằng:
$ webpack-dev-server
Khi deploy thì chỉ cần:
$ webpack -p
Và copy file index.html cùng dist.js để deploy.
huytd 04-08-2018
Bình luận
{{ comment.user.name }}
Bỏ hay
Hay
Cùng một tác giả
190
46
Tại sao phải viết blog kĩ thuật? Có rất nhiều bài viết trên mạng nói về vấn đề tại sao một lập trình viên nên thường xuyên viết các bài blog kĩ thu...
159
39
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
122
19
Phần 1: Tự truyện Tui và Toán đã từng là hai kẻ thù không đội trời chung trong suốt hơn mười lăm năm ròng rã. Ngay từ ánh nhìn đầu tiên đã ghét nh...
Bài viết liên quan
5
0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
16
0
Dịp cuối tuần vừa rồi thì mình cũng bắt đầu học Elm và làm thử 1 (Link), mục đích là clone lại Trello chơi. (Ảnh) Trong quá trình làm thì cũng nh...