BabelJS - 使用 Babel 和 JSX

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,并使用 Babel 对普通 JavaScript 做出反应。 要开始项目设置,请运行下面给出的命令来安装 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']
            }
         }
      ]
   }
};

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

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

接下来是 module.exports 对象,它具有属性 entry、output 和 module。 入口是起点。这里我们需要给出我们要编译的主要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']
         }
      }
   ]
}

module 是具有规则详细信息的对象,具有测试、包含、加载器、查询等属性。

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

Include 告诉用于查找文件的文件夹。

Loader 使用 babel-loader 来编译代码。

Query 具有属性预设,即值为 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 转换它并做出反应。

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

版权声明:著作权归作者所有。

相关推荐

Linux使用wget和curl下载jdk

在Linux下安装jdk主要有两种方式:下载安装包手动安装和使用Linux的安装工具(yum或ubuntu的apt)安装。使用Linux安装工具安装的是OpenJDK,如果我们想安装oracle的JDK则需要下载安装包手动安装。下载Oracle JDK需要接受license,在Linux可以使用wget和curl来下载Wget下载Java 8u15164位的tar.gz和rpm

Git:.gitignore和.gitkeep文件的使用

.gitignore.gitignore,顾名思义,这个文件是用于列出那些让Git忽略,不被跟踪的文件,即排除在Git的版本控制外。可以使用*通配符匹配多个字符。忽略指定名称的文件# .gitignore示例,忽略test.txt文件  ################### test.txt 忽略指定后缀的文件# .gitignore示例,忽略后缀为.impl的文件

Android使用InputMethodManager显示和隐藏软键盘

Android主要用InputMethodManager来对软键盘进行管理。手动显示或隐藏软键盘前需要先获取InputMethodManager。InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); if (imm&

使用RecyclerView和LayoutAnimation给列表添加进入动画

这里讲解下使用RecyclerView和LayoutAnimation给列表添加进入动画。分为三个步骤:给列表项添加动画使用列表项的动画定义LayoutAnimationRecyclerView应用LayoutAnimation的动画使用LayoutAnimation定义动画的好处是,它是单独定义,可以应用于任何ViewGroup的子类。这里是以RecyclerView为示例。示例效果示例是一个向

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。案例假设有一个表格组件,和一个行组件<ObjectRow />,现在需要在表格组件里循环生成行组件<ObjectRow />。是不能直接在jsx里使用for循环,这里介绍两种方法:map函数和立即执行函数。方法一:使用map函数render: function ()&nb

Kotlin使用JUnit 5的@BeforeAll和@AfterAll

Java版本JUnit5 @BeforeAll和@AfterAll的用法可以参考此文。Kotlin的类是没有静态方法的,如果要提供类似于Java的静态方法,可以使用伴生对象(companion object)语法。应用于所有实例的@BeforeAll和@AfterAll把Java版静态方法的JUnit 5 @BeforeAll和@AfterAll使用Kotl

JavaScript定义使用类和对象Object的方法

在JavaScript里定义Object有三种方式:对象常量,使用object的构造器定义,以及使用class定义。方式一、对象常量使用对象常量的方式是很直接的,直接在定义对象的属性及方法即可,如下:const bird = { name: 'Joe', numWings: 2, numLegs: 2, numHeads: 1, fly(){}, chirp(){}, eat(){}

理解JavaScript的var, let和const使用与作用域

在JavaScript里,var,let和const都可以用来声明变量的。var username= '张三'; let gender = 'Male'; const age = 20;let,var和const的使用let和var可以在声明后更改它们的值,并且在声明时不赋值,JavaScript会自动以默认值对它们做初始化。const声明的变量不能改变,也即是常量,声明变量时必须赋值。var u