使用 webpack 4 和 Babel 构建 React 应用(2018)

1.安装和配置 webpack

2.Babel的安装与配置

Babel其实是一个编译JavaScript的平台，Webpack loaders(加载器) 将某些内容作为输入并生成其他内容作为输出。
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-env包和解析JSX的babel-preset-react包）。
babel-loader是webpack加载器，负责接收最新的JavaScript代码（ES6，ES7…）代码并使其可以被当前使用的浏览器完全支持。
安装并配置babel-preset-env用于将JavaScript ES6代码编译为ES5
安装并配置babel-preset-react用于将JSX和其他东西编译到JavaScript

1.安装依赖包

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react

2.配置Babel，创建文件.babelrc

Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 “.babelrc” 的配置文件中。
webpack会自动调用.babelrc里的babel配置选项。

{"presets": ["env", "react"]
}

3.配置webpack.config.js

module.exports = {module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},exclude: /node_modules/}]}}
}

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了

3.编写 React 组件

安装 React 和 React-DOM

npm install --save react react-dom

使用ES6语法创建react组件

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';class Greeter extends Component{render() {return (<div>{config.greetText}</div>);}
}
export default Greeter

使用ES6的模块定义和渲染Greeter模块

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';render(<Greeter />, document.getElementById('root'));

使用 webpack 4 和 Babel 构建 React 应用(2018)相关推荐

React+Webpack+Eslint+Babel构建React脚手架
React+webpack+Eslint+Babel构建React脚手架参考网上文章,说的不是很全,想自己写一篇来巩固知识点,脚手架源码参考阮一峰老师的Github 所用技术栈 React Babe ...
使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境第二篇:使用react-rout ...
react-dnd-dom_我如何使用react-dnd和react-flip-move构建React游戏
react-dnd-dom by Nicholas Vincent-Hill 尼古拉斯·文森特·希尔(Nicholas Vincent-Hill) 我如何使用react-dnd和react-flip- ...
使用 create-react-app 构建 react应用程序
2019独角兽企业重金招聘Python工程师标准>>> 本文主要是对SPA搭建的实践过程讲解,在对react.redux.react-router有了初步了解后,来运用这些技术构建一 ...
使用 Dawn 构建 React 项目
开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及进行 jsx 语法的转义.当然也可以用 crea ...
react api_如何在WordPress REST API之上构建React应用
react api by Andrey Pokrovskiy 通过安德烈·波克洛夫斯基(Andrey Pokrovskiy) 如何在WordPress REST API之上构建React应用 (How ...
spring react_使用Spring WebFlux构建React性REST API –第3部分
spring react 在上一篇文章的续篇中,我们将看到一个应用程序以公开React性REST API. 在此应用程序中,我们使用了带有WebFlux的Spring Boot 具有响应式支持的Ca ...
为Tueri.io构建React图像优化组件
Let's face it, image optimization is hard. We want to make it effortless. 面对现实吧,图像优化非常困难. 我们希望毫不费力. ...
如何使用动态工具提示构建React Native图表
by Vikrant Negi 通过Vikrant Negi 如何使用动态工具提示构建React Native图表 (How to build React Native charts with dyn ...

使用 webpack 4 和 Babel 构建 React 应用(2018)

1.安装和配置 webpack

2.Babel的安装与配置

1.安装依赖包

2.配置Babel，创建文件.babelrc

3.配置webpack.config.js

3.编写 React 组件

使用 webpack 4 和 Babel 构建 React 应用(2018)相关推荐

最新文章

热门文章