BabelJS - 使用Babel和JSX

在本章中,我们将了解使用JSX和babel.在我们进入细节之前,让我们了解JSX是什么.

什么是JSX?

JSX是一个包含xml组合的JavaScript代码语法在里面. JSX标签具有标签名称,属性和子项,使其看起来像xml.

React使用JSX进行模板化而不是常规JavaScript.没有必要使用它,但是,以下是它附带的一些专业人士.

  • 它更快,因为它在将代码编译为JavaScript时执行优化.

  • 它也是类型安全的,并且在编译期间可以捕获大多数错误.

  • 如果您熟悉HTML,它可以更轻松,更快速地编写模板.

我们在项目设置中使用了babel 6.如果您想切换到babel 7,请使用 @ babel/babel-package-name 安装所需的babel包.

我们将创建项目设置和使用webpack编译jsx,使用Babel对普通JavaScript做出反应.

要启动项目设置,请运行下面给出的babel,react和webpack安装命令.

命令

npm init


Webpack安装

现在,我们将安装我们需要使用的必要软件包 - 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安装后:

Work_With_Babel_Webpack

现在将创建一个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']
            }
         }
      ]
   }
};

文件的结构如上所示.它从路径开始,它给出了当前路径的详细信息.

var path = require('path');//给出当前路径

接下来是module.exports对象,它有属性入口,输出和模块.

条目是起点.这里我们需要给出我们想要编译的主要js文件.

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

path.resolve(_dirname,'src/main.js')  - 将查找目录中的src文件夹和该文件夹中的 main.js .

输出

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

输出是一个具有路径和文件名详细信息的对象.路径将保存将保存编译文件的文件夹,文件名将指示要在 .html 文件中使用的最终文件的名称.

模块

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

  • 模块是具有规则详细信息的对象,其具有属性,即test,include,loader,query.

  • Test 将保存以.js和.jsx结尾的所有js文件的详细信息.它具有在给定入口点的末尾查找.js和.jsx的模式.

  • 包含告诉文件夹用于查找文件.

  • Loader 使用babel-loader f或者编译代码.

  • 查询具有属性预设,它是值为env-es5或es6或es7的数组.我们使用了es2015并作为预设做出反应.

创建文件夹 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 反应进行转换.

命令

npm run pack


Convert_Using_Presets

添加 main_bundle. js 从dev文件夹到 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


Dev Folder To Index

输出

开发文件夹到索引输出