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
        <!--react-->
        <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.

Hiç yorum yok:

Yorum Gönderme