配置React开发环境教程
这是一篇新手向文章，主要是记录一下使用过程，希望能给予别人一些帮助和提示
用 Yarn 做包管理 用 Babel 做jsx和es6语法编译器 Webpack 做模块管理和打包
教程是基于macOS的，Nodejs得提前安装好。我的Nodejs和npm的版本如下
node -v
v6.9.2
npm -v
3.10.9Yarn安装和配置
我们在 macOS 下可以通过brew去安装，如下
brew update
brew install yarnYarn 下载的包或者模块都是跟npm一个源的，因为某些原因，下载速度非常慢，难受，所以我们得换源，如下
yarn config set registry 'https://registry.npm.taobao.org'通过查看是否换源成功
yarn config get registry
项目初始化
打开你的终端，新建文件夹然后进入该文件夹，用yarn init去做初始化,过程类似npm init，会有几个选项需要你填写，你可以根据你的需要去填写，这里我就直接一路回车就可以了。
mkdir react-demo
cd react-demo
yarn initinit完之后，就会提示success Saved package.json，说明初始化成功，我们可以查看一下package.json有什么东西
vim package.json
{
"name": "react-demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}webpack安装和配置
yarn add webpack webpack-dev-server path
安装完毕，你会发现当前目录多了个yarn.lock，这个文件是Yarn用来锁定当前的依赖，不用担心
现在，我们已经安装好webpack了，我们需要一个配置文件用来执行，如下
touch webpack.config.js
然后更新该文件内容为如下
const path = require('path');
module.exports = {
entry: './client/index.js',
output: {
path: path.resolve('dist'),
filename: 'index_bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
]
}
}从配置文件内容可以看出，为了让webpack运行，我们需要一个入口entry和一个输出output
为了能让JSX代码或者是ES6的代码也能正常在浏览器运行，我们需要loaders去装载babel-loader
更多的loaders我们可以查看webpack文档
Babel安装和配置
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
在webpack配置过程中，我们用到了babel-loader,除了这个外，我们同样需要babel的其他依赖
babel-preset-es2015 和 babel-preset-react这两个是 Babel 的插件，告诉Babel将es2015和react的代码编译为Vanilla JS
安装完毕，我们还需要去配置Babel，新建一个文件为.babelrc
touch .babelrc
然后更新该文件内容为如下
{
"presets":[
"es2015", "react"
]
}webpack中的loader的 babel-loader 就是根据这个去执行
配置入口文件
现在我们的目录结构如下
|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock我们需要创建新的文件夹，同时在新文件夹内新建index.js和index.html文件
mkdir client
cd client
touch index.js
touch index.html然后我们更新一下index.js的内容为
console.log('Hello world!')
同样地，我们也要更新一下index.html内容为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>index.html是我们react组件运行在浏览器上的载体，react组件编写是jsx，同时也用到了es6，由于大多数浏览器是不支持es6和jsx，所以我们必须通过Babel编译这些代码，然后绑定输出显示在index.html上。
index.html是我们react组件运行在浏览器上的载体，react组件编写是jsx，同时也用到了es6，由于大多数浏览器是不支持es6和jsx，所以我们必须通过Babel编译这些代码，然后绑定输出显示在index.html上。
同时我们还需要html-webpack-plugin包为我们生成html
`cd ..
yarn add html-webpack-plugin
`
安装完成后，打开webpack.config.js然后添加下面配置信息
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
...
module: {
loaders: [
...
]
},
plugins: [HtmlWebpackPluginConfig]
}我们引入html-webpack-plugin,然后创建它的实例，然后配置template、filename和inject，其中inject: 'body'`是告诉插件添加JavaScript到页尾，在闭合body标签前
为了可以运行它，我们需要配置package.json,在"dependencies": {}代码块前插入如下代码
"scripts": {
"start": "webpack-dev-server"
},然后我们就可以运行了
yarn start
终端出现如下内容
Project is running at http://localhost:8080/
我们打开浏览器，输入http://localhost:8080/，在开发者工具的Console，发现有一段信息为Hello world!
react安装与配置
yarn add react react-dom
然后进入client目录，创建组件
cd client
mkdir components
cd components
touch App.jsx
cd ../..现在我们项目目录结构如下
|-- node_modules
|-- client
|-- components
|-- App.jsx
|-- index.html
|-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock然后我们更新一下App.jsx文件的内容如下
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div style={{textAlign: 'center'}}>
<h1>Hello World Again</h1>
</div>);
}
}我们还需要修改一下我们的入口文件index.js,替换内容为如下
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App />, document.getElementById('root'));然后在终端输入yarn start
刷新http://localhost:8080/,就能看到Hello World Again
至此，通过 Yarn 包管理，配置webpack和Babel，去搭建编写react组件的开发环境的新手向教程就此完毕
Last modification：May 11th, 2018 at 03:45 pm
© The copyright belongs to the author