Levent Yıldız: Browserify kurulumu ve kullanımı

4 Ağustos 2016 Perşembe

Browserify kurulumu ve kullanımı

Merhaba, bu yazımda sizlere javascript dosyalarını başka bir javascript dosyasına import etmek için kullanılan browserify kurulum ve kullanımını paylaşıyorum. Aşağıdaki adımları takip ederek browserify'ı kurup react ve react-dom kütüphanesini JS dosyasına import edebilirsiniz.

1-) browserify'ı yükleyin

npm install -g browserify

2-) react ve react-dom'u yükleyin

npm install --save react react-dom

3- index.html oluşturun

touch index.html

4- index.html içeriği :

<html>
<head>
<title> isReact </title>
</head>
<body>
<main></main>
<script type="text/javascript" src="bundle.js" ></script>
</body>
</html>

5- app.jsx dosyası oluşturun.

touch app.jsx

6- app.jsx dosyasının içeriği:

var React = require('react');
var ReactDOM = require('react-dom');

var mainEl = document.querySelector("main");

var Sample = React.createClass({
render:function(){
return (<div> Hello wordl from React component! </div>);
}
});

ReactDOM.render(<Sample/> , mainEl);

7-) babel ile app.jsx dosyasını app.js'e dönüştürelim

babel app.jsx --watch --out-dir .

8- browserify ile app.js'i bundle.js'e dönüştürelim(bu dönüşümün içinde artık react ve react-dom da var).

browserify app.js > bundle.js

Bu sayede

<script type="text/javascript" src="react.min.js"></script>
<script type="text/javascript" src="react-dom.min.js"></script>

şeklinde import ettiğimiz dependency dosyalarını

var React = require('react');

var ReactDOM = require('react-dom');

şeklinde import etmiş olduk.

Levent Yıldız

4 Ağustos 2016 Perşembe

Browserify kurulumu ve kullanımı

Hiç yorum yok:

Yorum Gönder