javascript - Browserify, Webpack veya Babel olmadan reactjs modüllerini gerektirmek

Visual Studio'da TypeScript HTML uygulaması kurmaya çalışıyorum. Reactjs v0.14.7 kullanmak istiyorum

Browserify gibi araçları kullanmaktan kaçınmak isterim.

Ancak, react-dom modülünü o zaman nasıl kullanmalı?

Bir süreliğine typescript'i unutalım. Önce saf ES5'i çalışır duruma getirmem gerekiyor.

şu anda, bende bu var:

<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
    var Button = React.createClass({
        render: function () {
            return (React.createElement("div", { className: "btn btn-default" }, 'hello world'));
        }
    });
    ReactDOM.render(React.createElement('Button'), document.getElementById('container'));
</script>

ancak, tarayıcı şikayet ediyor, ReactDOM nesnesi mevcut değil.

Denedim:

<script src="Scripts/require.js"></script>
<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
   var React = require('react');
   var ReactDOM = require('react-dom');
   ....
</script>

ancak, require.js ile çalışmıyor: Modül adı "react" henüz _. bağlamı için yüklenmedi. require([]) kullanın

Birisi buna biraz daha ışık tutabilir mi, lütfen? Sunucu tarafı araçları olmadan React nasıl kullanılır, örneğin bundling, transpiling gibi.

“npm kullan” gibi cevaplar cevap olarak kabul edilmeyecek.

Cevap #1

RequireJS ve require çok farklı şeylerdir - bunun hakkında daha sonra detaylı bilgi verilecek.

React'i Browserify veya Webpack gibi bir araç olmadan kullanmak istiyorsanız, mutlaka bir modül yükleyiciye ihtiyacınız yoktur. Barındırılan React ve ReactDOM sürümleri kutudan çıktığı gibi kullanabileceğiniz global değişkenleri ortaya çıkaracaktır.

<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script>
console.log(React, ReactDOM);
</script>

Eğer bunlarla yerel olarak çalışmak istiyorsanız, bu dosyaları sadece indirin.

SystemJS

Bütün bunların dışında, SystemJS ve JSPM tam olarak aradığınız şey gibi görünüyor.

Önce paketlerinizi yüklemek için jspm kullanın.

jspm install systemjs react react-dom

Sonra SystemJS'i bağlayın ve yapılandırın.

<script src='jspm_packages/system.js'></script>
<script>
  System.import('app.js');
</script>

Şimdi app.js içinde CommonJS tarzı kod yazabilirsiniz.

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

SystemJS, geri kalan betiklerinizin yüklenmesini yönetecektir. Eğer bir üretim sürümü yapmak istiyorsanız, yapmanız gereken şey sadece jspm bundle app komutunu çalıştırmaktır.

CommonJS

React eğitimlerinde ve diğer örneklerde gördüğünüz require çağrıları, CommonJS adı verilen bir modül formatı içindir.

require('react') kullanarak React modülünün (npm ile node_modules içine yüklendi) dışa aktardığı değere bir referans alırsınız. Bu, ihtiyaç duyduğunuz tüm modülleri bir araya getirip tek bir büyük betik dosyası olarak çıktısını verebilecek Browserify veya Webpack gibi tarayıcı öncesi bir yapı adımına ihtiyaç duyduğunuz anlamına gelir.

RequireJS

Kafa karıştırıcı bir şekilde, CommonJS ve RequireJS bağımlılıkları belirtmek için aynı isime sahip bir fonksiyon kullanır. RequireJS require fonksiyonunu, CommonJS modülleri ile çalışıyormuş gibi kullanmaya çalışıyorsunuz.

Eğer React'i bunun yerine RequireJS ile içe aktarmak istiyorsanız, o zaman şöyle bir şeye ihtiyacınız var:

<script src="js/require.js"></script>
<script>
  require.config({
    'baseUrl' : 'Scripts/',
  });
  require(["react-0.14.7", "react-dom-0.14.7"],
  function(React, ReactDOM) {
    console.log(React, ReactDOM);
  });
</script>

Kodunuz çalıştığında, RequireJS belirtilen modüller için script etiketlerini ekleyecektir. Ardından bu scriptler yüklendiğinde, sizin kullanmanız için dışa aktardıkları değerleri geri çağırma fonksiyonuna geçirecektir.

İlgili makaleler