使用 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)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。