Bir Create-React-App uygulamasında index.html ve index.js arasındaki bağlantı nerede?

Create React Uygulaması ile oynamaya başlıyorum, ancak index.jsiçeride nasıl yüklendiğini anlayamıyorum index.html. Bu html kodudur:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
</html>

Ama hiçbir yerde ithalatını göremiyorum index.js. Bağlantı nerede? Neyi kaçırıyorum?

— Piero
kaynak

İçeriğinizi nasıl sunuyorsunuz?

— Nicklas Pouey-Winger

Varsayılan hiçbir şeyi değiştirmedim, sadece şunu yapıyorum: create-react-app my-appve projeyi webstorm kullanarak açıyorum, sonra npm start yapıyorum, ama benim sorum index.html'nin index.js'yi yüklemesi gerektiğini nasıl bildiği? nerede yazılır?

— Piero

webpack.github.io/docs/webpack-dev-server.html Webpack-dev-server bunu sizin için geliştirme aşamasında ele alır.

— Nicklas Pouey-Winger

@NicklasWinger Mekanizmayı anlamak için yapılandırma dosyasını nerede bulabilirim?

— Piero

npm run ejectYapılandırmaları manuel olarak kontrol etmek için çalıştırabilirsiniz . Neler olup bittiğini tam olarak anlamak için sıfırdan daha basit bir kurulum yapmanızı tavsiye ederim :)

— Nicklas Pouey-Winger

117

Başlık altında, Create React App html-webpack-eklentili Webpack kullanıyor .

Yapılandırmamız , Webpack'in bir "giriş noktası" olarak kullandığını belirtir . Bu, okuduğu ilk modüldür ve ondan diğer modüllere kadar onları tek bir paket halinde derler.src/index.js

Web paketi varlıkları derlediğinde, tek bir (veya kod bölme kullanıyorsanız birkaç) paket oluşturur. Son yollarını tüm eklentilere açık hale getirir. Komut dosyalarını HTML'ye enjekte etmek için böyle bir eklenti kullanıyoruz.

HTML dosyasını oluşturmak için html-webpack-eklentisini etkinleştirdik . Yapılandırmamızda şablon olarak okunması gerektiğini belirttikpublic/index.html . Ayrıca inject seçeneği olarak ayarladık true. Bu seçenekle, Webpack tarafından sağlanan yolla birlikte son HTML sayfasına html-webpack-pluginbir ekler <script>. Bu son sayfa, koştuktan sonra girdiğiniz ve build/index.htmlkoştuğunuzda npm run buildsunulduğu sayfadır ./npm start

Bu yardımcı olur umarım! Create React App'in güzelliği, aslında bunu düşünmenize gerek olmamasıdır.

— Dan Abramov
kaynak

Bir soru daha, react veya genel olarak js için hangi IDE'yi kullanıyorsunuz? Atom ve Webstorm arasında seçim yapmak için savaştım, ne düşünüyorsun?

— Piero

Webstorm kullanıyorum ve şu ana kadar bundan gerçekten memnunum.

— Lancelot

Farklı HTML sayfalarını yüklemek için birden çok yolu nasıl çözersiniz?

— quantumpotato

Aslında @Dan Abramov bir dahi: D ama "aslında bunu düşünmene gerek yok" dediğinde ona katılmıyorum çünkü herkes olayları aşağıdan yukarıya anlamalı.

— Seif Eddine Slimene

Umarım bu, buranın dışında başka bir yerde belgelenmiştir? CRA belgelerinde mi? Uygulamayı bilmemize gerek yok, ancak her şeyin index.js ile başladığını ve public / index.html'nin nasıl karıştırıldığını bilmemiz gerekiyor Herkese teşekkürler!

— Ashley Aitken