Bài viết tốt nhất để thiết lập cơ bản ứng dụng web phản ứng với Babel + React + Webpack.

Tôi luôn thích viết về React bất cứ lúc nào trong thời gian rảnh. Cá nhân tôi đã khởi động rất nhiều dự án React trong thời gian gần đây. Tôi luôn phải thiết lập dự án từ đầu. Cuối cùng, tôi đã tạo https://github.com/vishalvishalgupta/react-webpack-babel-setup của riêng tôi. Như bạn có thể biết, các dự án và kho lưu trữ React không thể đếm được đã được tạo ra theo cách đó. Nhưng bài viết này không phải là nỗ lực của tôi để quảng cáo cho một dự án nồi hơi React khác. Tôi đã có một số lý do tại sao tôi trích xuất quá trình thiết lập từ một bài viết khác của tôi.

Trước khi bạn có thể bắt đầu, bạn nên đảm bảo có một trình soạn thảo và thiết bị đầu cuối được cài đặt trên máy của bạn. Ngoài ra, bạn sẽ cần một phiên bản cài đặt của nút với npm. Hãy chắc chắn đã thiết lập mọi thứ của nó trước khi bạn tiếp tục đọc.

mkdir phản ứng-nồi hơi
cd phản ứng-nồi hơi
npm init -y
mkdir dist
cd dist
chạm vào index.html

Toàn bộ ứng dụng được phục vụ chỉ chứa hai tệp: tệp .html và .js. Mặc dù tệp .js sẽ được tạo tự động từ tất cả các tệp nguồn JavaScript của bạn (thông qua Webpack) sau đó, bạn đã có thể tạo tệp .html theo cách thủ công làm điểm nhập cảnh cho ứng dụng của mình.



  <đầu>
     Thiết lập Babel React Webpack của Vishal Gupta </ ​​title>
  </ đầu>
  <cơ thể>
    <div id = "ứng dụng"> </ div>
    <script src = "./ bundle.js"> </ script>
  </ cơ thể>
</ html></pre><h3>Thiết lập gói webpack</h3><p>Bạn sẽ sử dụng Webpack làm công cụ xây dựng mô-đun và công cụ xây dựng. Ngoài ra, bạn sẽ sử dụng webpack-dev-server để phục vụ ứng dụng đi kèm của mình trong môi trường cục bộ. Nếu không, bạn không thể thấy nó trong trình duyệt để phát triển nó. Cuối cùng nhưng không kém phần quan trọng, bạn cần gói nút webpack-cli để định cấu hình thiết lập Webpack của bạn trong tệp cấu hình sau này. Hãy để cài đặt cả ba gói nút bằng cách sử dụng npm.</p><pre>cài đặt npm --save-dev webpack webpack-dev-server webpack-cli</pre><p>Kịch bản để chạy dự án dựa trên webpack: -</p><pre>...
"tập lệnh": {
  "bắt đầu": "webpack-dev-server --config ./webpack.config.js - phát triển chế độ",
  ...
},
...</pre><p>Hãy để cùng nhau tạo tập tin webpack.config.js cần thiết.</p><pre>module.exports = {
  mục nhập: './src/index.js',
  đầu ra: {
    đường dẫn: __dirname + '/ dist',
    công khai: '/',
    tên tệp: 'bundle.js'
  },
  máy chủ dev: {
    nội dungBase: './dist'
  }
};</pre><p>Điều còn thiếu trong dự án của chúng tôi là tệp src / index.js.</p><pre>mkdir src
cd src
chạm vào index.js</pre><p>index.js: -</p><pre>console.log ('My React Webpack Babel Setup');</pre><p>Bây giờ bạn sẽ có thể bắt đầu webpack-dev-server của bạn.</p><pre>bắt đầu npm</pre><h3>Cài đặt Babel</h3><p>Babel cho phép bạn viết mã bằng JavaScript, được hỗ trợ trong hầu hết các trình duyệt. Perhaphs bạn đã nghe nói về JavaScript ES6 (ES2015) và hơn thế nữa. Với Babel, mã sẽ được chuyển trở lại thành JavaScript vanilla để mọi trình duyệt, mà không có tất cả JavaScript ES6 và các tính năng được triển khai, có thể diễn giải nó. Để Babel hoạt động, bạn cần cài đặt hai phụ thuộc chính của nó.</p><pre>cài đặt npm --save-dev @ babel / core @ babel / preset-env</pre><p>Ngoài ra, để kết nối nó với Webpack, bạn phải cài đặt một trình tải gọi là:</p><pre>cài đặt npm --save-dev babel-loader</pre><p>Bước cuối cùng, vì bạn muốn sử dụng React, bạn cần thêm một cấu hình để chuyển đổi cú pháp React tựa JSX thành vanilla JavaScript.</p><p>Từ thư mục gốc:</p><pre>cài đặt npm --save-dev @ babel / preset-Reac</pre><p>webpack.config.js</p><pre>module.exports = {
  mục nhập: './src/index.js',
  mô-đun: {
    quy tắc: [
      {
        kiểm tra: /\.(js|jsx)$/,
        loại trừ: / node_modules /,
        sử dụng: ['babel-loader']
      }
    ]
  },
  giải quyết: {
    tiện ích mở rộng: ['*', '.js', '.jsx']
  },
  đầu ra: {
    đường dẫn: __dirname + '/ dist',
    công khai: '/',
    tên tệp: 'bundle.js'
  },
  máy chủ dev: {
    nội dungBase: './dist'
  }
};</pre><p>Bạn có thể bắt đầu ứng dụng của bạn một lần nữa. Không có gì phải thay đổi ngoại trừ việc bạn có thể sử dụng các chức năng ECMAScript sắp tới cho JavaScript ngay bây giờ.</p><p>Hoặc thiết lập các cài đặt trước babel trong .bablerc như bên dưới</p><p>Giáo dục</p><p>{</p><p>Cài đặt sẵn</p><p>Trẻ em @ babel / preset-env</p><p>Tuy nhiên, babel / preset-Reac</p><p>]</p><p>}</p><p>Giáo dục</p><p>hoặc bạn cũng có thể đặt nội dung trong gói.json của mình như bên dưới.</p><p>Giáo dục</p><pre>"babel": {
  "cài đặt trước": [
    "@ babel / preset-env",
    "@ babel / preset-Reac"
  ]
},</pre><p>Giáo dục</p><p>Babel cho phép bạn sử dụng JavaScript trong tương lai trong trình duyệt của mình, vì nó chuyển mã đó thành JavaScript vanilla. Bây giờ bạn đã được thiết lập để xây dựng thành phần React đầu tiên của mình bây giờ.</p><h3>Thiết lập lại trong dự án Webpack + Babel</h3><p>Để sử dụng React, bạn cần thêm hai gói nút. Các gói phản ứng và phản ứng-dom sẽ sửa lỗi bắt đầu npm của bạn.</p><p>Từ thư mục gốc:</p><pre>cài đặt npm --save Reac Reac-dom</pre><p>Trong src / index.js của bạn, bạn có thể triển khai hook đầu tiên của mình vào thế giới React.</p><p>src / index.js</p><pre>nhập React từ 'Reac';
nhập ReactDOM từ 'Reac-dom';</pre><pre>const title = 'My React Webpack Babel Setup';</pre><pre>ReactDOM.render (
  <div> {title} </ div>,
  document.getEuityById ('ứng dụng')
);</pre><h3>Thay thế mô-đun nóng trong React</h3><p>Một sự thúc đẩy phát triển lớn sẽ cung cấp cho bạn bộ tải nóng phản ứng (Thay thế mô-đun nóng). Nó sẽ rút ngắn vòng phản hồi của bạn trong quá trình phát triển. Về cơ bản bất cứ khi nào bạn thay đổi một cái gì đó trong mã nguồn của mình, thay đổi sẽ được áp dụng trong ứng dụng của bạn đang chạy trong trình duyệt mà không cần tải lại toàn bộ trang.</p><pre>cài đặt npm --save-dev Reac-hot-loader</pre><p>Bạn phải thêm một số cấu hình nữa vào tệp cấu hình Webpack của bạn.</p><p>webpack.config.js</p><pre>const webpack = Yêu cầu ('webpack');</pre><pre>module.exports = {
  mục nhập: './src/index.js',
  mô-đun: {
    quy tắc: [
      {
        kiểm tra: /\.(js|jsx)$/,
        loại trừ: / node_modules /,
        sử dụng: ['babel-loader']
      }
    ]
  },
  giải quyết: {
    tiện ích mở rộng: ['*', '.js', '.jsx']
  },
  đầu ra: {
    đường dẫn: __dirname + '/ dist',
    công khai: '/',
    tên tệp: 'bundle.js'
  },
  bổ sung: [
    gói web mới.HotModuleReplocationPlugin ()
  ],
  máy chủ dev: {
    nội dungBase: './dist',
    nóng: đúng
  }
};</pre><p>Ngoài ra, trong tệp src / index.js, bạn phải xác định rằng tải lại nóng có sẵn và nên được sử dụng.</p><p>src / index.js</p><pre>nhập React từ 'Reac';
nhập ReactDOM từ 'Reac-dom';</pre><pre>const title = 'My React Webpack Babel Setup';</pre><pre>ReactDOM.render (
  <div> {title} </ div>,
  document.getEuityById ('ứng dụng')
);</pre><pre>mô-đun.hot.accept ();</pre><p>Bây giờ bạn có thể bắt đầu ứng dụng của bạn một lần nữa.</p><p>Từ thư mục gốc:</p><pre>bắt đầu npm</pre><h3>Điều may mắn nhất BYE BYE. Chúc mừng React.</h3><p>Đọc câu chuyện này sau trong Tạp chí.</p><p>Thức dậy vào mỗi sáng Chủ nhật đến tuần, những câu chuyện, ý kiến ​​và tin tức đáng chú ý nhất trong hộp thư đến của bạn: Nhận bản tin đáng chú ý></p></div><div class="neighbor-articles"><h4 class="ui header">Xem thêm</h4><a href="/deal/life-long-learners-make-the-best-tech-employees-867c65/" title="Người học suốt đời làm cho nhân viên công nghệ tốt nhất">Người học suốt đời làm cho nhân viên công nghệ tốt nhất</a><a href="/deal/the-best-way-to-explain-white-male-privilege-to-a-privileged-white-male-5adfae/" title="Cách tốt nhất để giải thích đặc quyền nam trắng cho một nam trắng đặc quyền.">Cách tốt nhất để giải thích đặc quyền nam trắng cho một nam trắng đặc quyền.</a><a href="/deal/in-one-answer-sheryl-sandberg-provides-some-of-the-best-career-advice-you-ll-ever-hear-5bc320/" title="Trong một câu trả lời, Sheryl Sandberg cung cấp một số lời khuyên nghề nghiệp tốt nhất mà bạn sẽ nghe">Trong một câu trả lời, Sheryl Sandberg cung cấp một số lời khuyên nghề nghiệp tốt nhất mà bạn sẽ nghe</a><a href="/deal/the-best-way-to-understand-somalia-is-to-read-its-literature-ea3129/" title="Cách tốt nhất để hiểu Somalia là đọc văn học của nó">Cách tốt nhất để hiểu Somalia là đọc văn học của nó</a><a href="/deal/my-best-friend-elena-ede2be/" title="Người bạn tốt nhất của tôi, Elena.">Người bạn tốt nhất của tôi, Elena.</a></div></main><div class="push"></div></div><footer style="height:50px">finleyandoliver.com<!-- --> © <!-- -->2019<!-- --> <a href="https://uk.finleyandoliver.com/deal/the-best-article-for-basic-setting-up-react-app-with-babel-react-webpack-9e1c8a" title="https://finleyandoliver.com">finleyandoliver.com</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script>
                  window.cookieconsent.initialise({
                    "palette": {
                      "popup": {
                        "background": "#eaf7f7",
                        "text": "#5c7291"
                      },
                      "button": {
                        "background": "#56cbdb",
                        "text": "#ffffff"
                      }
                    },
                    "showLink": false
                  });
              </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>
                (adsbygoogle = window.adsbygoogle || []).push({
                  google_ad_client: "ca-pub-3845662922897763",
                  enable_page_level_ads: true
                });
              </script></body></html>