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ả
161
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...
149
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ứ...
106
17
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
12
2
Sorry mọi người vì lâu rồi mới lại viết phần tiếp theo của series webpack này, hoàn thành được bài này xong giống như thoát được vấn đề nút cổ chai...
20
2
(Ảnh) Code splitting (chia nhỏ code) là một trong những tính năng làm nên tên tuổi của Webpack. Và với riêng bản thân mình thấy thì đây chính là t...