React ile proje oluştururken her ne kadar create-react-app ile oluşturmak kısa ve kolay gibi görünse de webpack ve babel kullanılmak istendiği durumlarda durumun biraz karışık göründüğünü farkettim ve bu konuda işleri daha kolay hale getirecek bir yazı yazmak istedim.
Öncelikle bir proje adı belirleyelim. Bizimkisi reactProje olsun.Ardından terminal ekranını açıp sırasıyla aşağıdaki komutları yazalım.
mkdir reactProje
cd reactProje
npm initYeniden root dizinine dönelim ve aşağıdaki işlemleri yapalım.
mkdir dist
cd dist
touch index.html //windows için echo > index.htmlOluşturduğumuz index.html dosyasını açıp içerisine aşağıdaki kodları yapıştıralım.
<!DOCTYPE html>
<html>
<head>
<title>React Webpack Babel Kurulumu</title>
</head>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>Kodları yapıştırdıktan sonra yeniden bir üst dizine dönüp projemizi ayağa kaldırmak için kullanacağımız webpack için gerekli olan dependency’ leri kurmak için aşağıdaki komutu yazalım.
npm install --save-dev webpack webpack-dev-server webpack-cliŞu anda oluşturduğumuz dosyalar tree olarak şu şekilde görünmelidir.
- dist
-- index.html
- node_modules
- package.jsonŞimdi package.json dosyasının içini açalım. Açtığımızda scripts kısmının içinde sadece bir test kısmı göreceğiz. Scripts kısmına aşağıdaki komutu yapıştıralım.
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
},Root dizininde şimdi de bize webpack ayarlarını yapmamızı sağlayacak olan webpack.config.js adında bir dosya oluşturalım.
touch webpack.config.js //windows için echo > webpack.config.jswebpack.config.js dosyasının içine girip aşağıdaki kodları yapıştıralım.
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};Root dizininde şimdi de projemizin girişi olarak webpack’ e söylediğimiz index.js dosyasını oluşturalım. Bunun için sırasıyla aşağıdaki komutları yazalım.
mkdir src
cd src
touch index.js //windows için echo > index.jsŞu anda olmasını istediğimiz dosya yapısı ise aşağıdaki gibi olmalıdır.
- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.jsŞimdi ise babel kısmına geçiyoruz. Öncelikle babel nedir ondan bahsedelim. Günümüzdeki çoğu browser ES6 ile yazılmış olan js’ yi anlayamamaktadır. Babel ise bizim ES6 ile yazdığımız kodları arkada sessizce ES5' e çevirerek browser’ ın anlayacağı bir dile dönüştürür. Şu linke tıklayarak ekranın sol tarafına ES6 kodu yazıp ekranın sağında Babel’ ın bunu bizim için nasıl ES5 koduna dönüştürdüğünü görebiliriz. Bu kısa bilgiyi de verdikten sonra babel için gerekli olan dependency’ leri kuralım. Bunun için root dizininde olmalıyız. Yani ls veya dir (windows için) dediğimizde dist, node_modules, src, package.json ve webpack.config.js dosyalarını gördüğümüz dizin.
npm install --save-dev babel-core babel-loader babel-preset-env
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-reactŞimdi de yine root dizinimizde .babelrc adında bir dosya oluşturalım.
touch .babelrc //windows için echo > .babelrc.babelrc dosyasının içerisine ise aşağıdaki kodları yapıştıralım.
{
"presets": ["env","react"]
}Şimdi de yeniden webpack.config.js dosyasının içerisini açıp aşağıdaki kodları yapıştıralım.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},Şu anki webpack.config.js dosyasının görünümü aşağıdaki gibi olmalıdır.
module.exports = {
entry: [
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};Yavaş yavaş sona gelirken sıra artık react için gerekli olan dependency’ leri kurmaya geldi. Bunun için de aşağıdaki komutu root dizininde çalıştıralım.
npm install --save react react-domŞimdi de işlerin doğru çalışıp çalışmadığını görmek adına index.js dosyamızın içerisine girip aşağıdaki kodları yapıştıralım.
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'React Webpack Babel Kurulumu';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);Ve artık sona gelindi. Root dizinine aşağıdaki komutu yapıştıralım.
npm startBrowser’dan localhost:8080' i açarak webpack ve babel kurulumu yaptığımız işlemlerin sonucunu görebiliriz.
Son olarak react de hot module kavramından da bahsedeceğim. Biz kod ekranında herhangi bir değişiklik yaptığımızda gidip browser’ da bütün bir sayfayı yenilemek için F5' e basmak yerine hot module bu değişikliği bizim için anında yapar. Yani aslında baya iyi bir şey bu :)
Önce hot-module için gerekli olan dependency’ i kuralım. Tabi ki yine root dizinindeyiz.
npm install --save-dev react-hot-loaderArdında webpack.config.js dosyasını açıp içine aşağıdaki kalın olarak yazılmış kodları ekleyelim.
const webpack = require('webpack');
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
};Son olarak index.js dosyasını açıp en altına aşağıdaki kodu yapıştıralım.
module.hot.accept();Ve artık projemizin bütün işlerini başarıyla bitirdik. Yeniden npm start diyerek kodumuzu yazmaya başlayabiliriz. :)
