2017-02-24 17 views
7

Tôi bắt đầu chơi với ứng dụng Tạo phản ứng, nhưng tôi không thể hiểu cách index.js được tải bên trong index.html. Mã html là:Tạo React App index.html và kết nối index.js

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

Nhưng tôi không thể thấy bất cứ nơi nào việc nhập số index.js. Kết nối ở đâu? những gì tôi đang mất tích?

+0

Bạn phân phát nội dung của mình bằng cách nào? –

+0

Tôi đã không thay đổi bất cứ điều gì mặc định, tôi chỉ làm điều này: 'create-react-app my-app' và tôi mở dự án bằng cách sử dụng webstorm, sau đó tôi làm npm bắt đầu, nhưng câu hỏi của tôi là làm thế nào index.html biết rằng phải tải index.js? viết ở đâu? – Piero

+4

https://webpack.github.io/docs/webpack-dev-server.html Webpack-dev-server xử lý điều này cho bạn trong quá trình phát triển. –

Trả lời

13

Dưới mui xe, Tạo ứng dụng React sử dụng Webpack với html-webpack-plugin.

Cấu hình của chúng tôi specifies Webpack đó sử dụng src/index.js làm “entry point”. Vì vậy, đó là mô-đun đầu tiên mà nó đọc và nó bắt đầu từ mô-đun này đến các mô-đun khác để biên dịch chúng thành một gói duy nhất.

Khi webpack biên dịch nội dung, nó tạo ra một gói đơn (hoặc một số nếu bạn sử dụng tách mã). Nó làm cho đường dẫn cuối cùng của họ có sẵn cho tất cả các plugin. Chúng tôi đang sử dụng một plugin như vậy để chèn các tập lệnh vào HTML.

Chúng tôi đã bật html-webpack-plugin để tạo tệp HTML. Trong cấu hình của chúng tôi, chúng tôi specified rằng nó phải đọc public/index.html làm mẫu. Chúng tôi cũng đã đặt injectoption đến true. Với tùy chọn đó, html-webpack-plugin thêm <script> với đường dẫn được Webpack cung cấp ngay vào trang HTML cuối cùng. Trang cuối cùng này là trang bạn nhận được trong build/index.html sau khi chạy npm run build và trang được phục vụ từ / khi bạn chạy npm start.

Hy vọng điều này sẽ hữu ích! Vẻ đẹp của ứng dụng Tạo phản ứng là bạn không thực sự cần phải suy nghĩ về nó.

+0

Cảm ơn bạn rất nhiều vì lời giải thích tuyệt vời :) bây giờ nó là tinh thể rõ ràng! – Piero

+0

Một câu hỏi nữa, bạn sử dụng IDE nào để phản ứng hoặc js nói chung? Tôi đã chiến đấu trong sự lựa chọn giữa Atom và Webstorm, bạn nghĩ sao? – Piero

+0

Tôi đang sử dụng Webstorm và cho đến nay tôi thực sự hài lòng với nó. – Lancelot

Các vấn đề liên quan