BabelJS - 使用Babel和JSX

在本章中，我們將瞭解如何使用JSX和babel。在深入瞭解細節之前，讓我們先了解一下什麼是JSX。

什麼是JSX？

JSX是一種JavaScript程式碼，其中包含XML語法。JSX標籤具有標籤名稱、屬性和子節點，使其看起來像XML。

React使用JSX進行模板化，而不是普通的JavaScript。雖然沒有必要使用它，但它有一些優點。

它更快，因為它在將程式碼編譯成JavaScript時執行最佳化。
它也是型別安全的，大多數錯誤可以在編譯期間被捕獲。
如果您熟悉HTML，它可以使編寫模板更容易、更快。

我們在專案設定中使用了babel 6。如果您想切換到babel 7，請使用@babel/babel-package-name安裝必要的babel包。

我們將建立專案設定並使用webpack將jsx與react一起編譯成普通的JavaScript，使用Babel。

要開始專案設定，請執行以下命令以安裝babel、react和webpack。

命令

npm init

現在，我們將安裝我們需要使用的必要包 - babel、webpack和jsx -

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react
npm install --save-dev react-dom

以下是安裝後的package.json -

現在我們將建立一個webpack.config.js檔案，其中包含將js檔案捆綁並使用babel編譯成es5的所有細節。

要使用伺服器執行webpack，有一個叫做webpack-server的東西。我們添加了一個名為publish的命令；此命令將啟動webpack-dev-server，並將更新最終檔案儲存的路徑。目前，我們將用於更新最終檔案的路徑是/dev資料夾。

要使用webpack，我們需要執行以下命令 -

npm run publish

我們將建立webpack.config.js檔案，其中包含webpack工作所需的配置詳細資訊。

檔案中的詳細資訊如下 -

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.(js|jsx)$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['es2015','react']
            }
         }
      ]
   }
};

檔案的結構如上所示。它從path開始，提供當前路徑詳細資訊。

var path = require('path'); //gives the current path

接下來是module.exports物件，它具有entry、output和module屬性。

Entry是起點。在這裡，我們需要提供我們要編譯的主要js檔案。

entry: {
   app: './src/main.js'
},

path.resolve(_dirname, ‘src/main.js’) -- 將在目錄中查詢src資料夾，並在該資料夾中查詢main.js。

Output

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

Output是一個包含path和filename詳細資訊的物件。Path將儲存編譯後的檔案將儲存在哪個資料夾中，filename將告訴您在.html檔案中使用的最終檔名。

module

module: {
   rules: [
      {
         test:/\.(js|jsx)$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['es2015','react']
         }
      }
   ]
}

Module是一個包含rules詳細資訊的物件，該物件具有test、include、loader、query等屬性。
Test將儲存所有以.js和.jsx結尾的js檔案的詳細資訊。它具有模式，將在給定的入口點中查詢結尾處的.js和.jsx。
Include告訴要用於查詢檔案的資料夾。
Loader使用babel-loader編譯程式碼。
Query具有presets屬性，它是一個具有值env - es5或es6或es7的陣列。我們使用了es2015和react作為預設。

建立資料夾src/. 在其中新增main.js和App.jsx。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
         var style = {
         color: 'red',
         fontSize: 50
      };
      return (
         <div style={style}>
            Hello World!!!
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

執行以下命令捆綁.js檔案並使用預設es2015和react進行轉換。

命令

npm run pack

將dev資料夾中的main_bundle.js新增到index.html -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "dev/main_bundle.js"></script>
   </body>
</html>

命令

npm run publish

Output

列印頁面