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'));