React Framework ผมรู้คุณก็ใช้ EP 1 (ติดตั้งreact กับ webpack ,babel)

สิ่งที่ต้องรู้มาก่อนใน Ep นี้ นะครับ สามารถหาอ่านได้ตาม Google นะ ครับ นั้นก็คือ webpack คือนี้ไรหวะ เฮ้ยแล้ว babel คือไรฟะ เชรดดเข้!! ทำสองอันนี้ใช้ทำอะไรกันหวะ แต่ไอที่ว่ามันใช้ยังไงอันนี้ผมมีคำตอบ

ต้องบอกก่อนว่าจะทำการ config webpack babel ใช้กับ react นี่ลำบากพอสมควร ผมจึงอยากให้ทุกคนผ่านขั้นตอนนี้ไปได้โดยเร็วไม่ใช่ สะดุดอยู่ที่ขั้นตอนนี้แบบผม

เอาละ let start ขั้นแรก ก็

npm init -y

ก็จะได้ ไฟล์ package.json

ภาพที่ 1 ( npm init -y)
npm install webpack --save-dev

ติดตั้ง module webpack ครับ ในขั้นตอนนี้ ให้ update npm เป็น version 5.0.3 ขี้นไปนะครับ

npm install webpack-dev-server --save-dev
ภาพ 2 devDependencies

เมื่อติดตั้งจะมี devDependencies เพิ่มขี้นมา ใน package.json ครับ

ทำการ สร้าง ไฟล์ index.html และ entry.js โดยมีเนื้อหาตามนี้

//index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
//entry.js
document.write("It works.");

run >> webpack ./entry.js bundle.js

จะได้ file bundle.js มา แล้วลอง ไปเปิด ไฟล์ index.html

ภาพที่ 4 เปิดไฟล์ index.html บน chrome
npm install css-loader style-loader --save-dev

จะได้ devDependencies

ภาพที่ 5

create file >> webpack.config.js

module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};

เมื่อมีการใช้งาน ให้วิ่งไปที่ entry.js ก่อน โดยทำการ create และ แก้ไข bundle.js ทุกครั้งที่ทำการ compile

create file style.css

body {
background: yellow;
}

ต่อมา ก็ถึงการติ้งตั้ง config ค่า babel

ติดตั้ง 3 ตัวดังนี้

npm install babel-loader babel-core babel-preset-es2015 --save-dev
npm install babel-preset-stage-0 --save-dev
npm install babel-preset-react --save-dev

update file webpack.config.js และ create file .babelrc ตาม code ด้านล่างนี้

create fiel .babelrc

{
"presets": ["es2015", "stage-0", "react"]
}

run แสดงที่ http://localhost:8080/

ก็จบไปแล้วสำหรับการ config weback กับ babel เข้าด้วยกัน

สำหรับใน EP หน้า ก็จะมาเข้าสู่ react กันจริงซักที!!!

Like what you read? Give Teerapat GGWP a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.