Kodcular
Published in

Kodcular

React Componentini Npm Paketi Yapmak

Site geliştirirken sağ tarafta çıkan scroll bar’ları her zaman gizlemeyi tercih ettim. Çok sağlıklı bir yol olmayabilir fakat sayfanın tasarımını bozması beni çok rahatsız ediyordu. Ardından bir süredir düşündüğüm tasarımı koda dökerek yuvarlak bir progress bar geliştirdim. Son olarakta bunu bir paket haline getirip npm’e atmaya karar verdim. Bu makalede ise adım adım bu işlemleri anlatacağım.

React Npm Template

İlk olarak Chan Jing Hong’ın geliştirdiği React Npm Template’ini klonluyoruz. Bu paket bize React’ı build etmemize sağlayacak en temel gereksinimleri sağlıyor.

React Npm Template

React Component’inizi Eklemek

İkinci aşamada geliştirdiğiniz React componentini /src klasörünün içerisine taşıyoruz. İhtiyaç duyacağınız tüm .css yada .js dosyalarını burada tutuyoruz.

React Component’inin Eklenmesi

package.json Dosyasının Düzenlenmesi

package.json dosyasını açıp "name": "YOUR_PACKAGE_NAME" olan satırda npm paketimize kullanılmayan bir isim vermemiz gerekiyor. Paketiniz için ihtiyaç duyduğun farklı paketler var ise burada eklememiz gerekiyor. Ben geliştirdiğim pakette bunlara ek farklı bir ihtiyacım olmadığı için olduğu gibi bıraktım. Dosyanız şunun gibi duracak;

{
"name": "YOUR_PACKAGE_NAME",
"version": "0.0.1",
"description": "",
"main": "./lib/YOUR_COMPONENT.js",
"license": "MIT",
"scripts": {
"build": "webpack"
},
"peerDependencies": {
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"prop-types": "^15.6.0",
"babel-core": "^6.21.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.5.1",
"path": "^0.12.7",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"style-loader": "^1.1.3",
"webpack": "^4.5.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {}
}

npm install (yada yarn install) komutu ile paketlerimizin tamamının yüklenmesini bekliyoruz.

webpack.config.js

Son aşamaya geçmeden önce webpack config dosyamızda componentimizin konumunu belirtip, ES6 kodlarımızın ES5’e çevrildiğinde hangi konuma çıkarılması gerektiğini belirtiyoruz.

const path = require('path');

module.exports = {
mode: 'production',
entry: './src/MyCoolButton.js',
output: {
path: path.resolve('lib'),
filename: 'MyCoolButton.js',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
],
},
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
}
},
externals: {
// Don't bundle react or react-dom
react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React"
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM"
}
}
};

Kodlarınızı Paketlemek

Ve son olarak npm run build komutu ile kodlarımızın tarayıcıların anlayacağı seviyeye dönüşmesini bekliyoruz. Sonrasında paketimiz npm’e gönderilmeye hazır.

npm login komutu ile üyeliğimize giriş yaptıktan sonra, npm publish komutu ile paketimizi npm’de yayınlıyoruz. Her publish’te package.json dosyasında versiyon yükseltmeyi unutmayın.

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

--

--

“Kodcular, Türkiye’nin En Büyük Medium Yazılım Topluluğudur.” Bu yayın yazılım üzerine üretilen blogların bir araya geldiği bir Türkçe yayındır.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store