创建一个项目文件夹
生成一个package.json文件
npm init --yes
- 安装webpack和webpack-dev-server
npm install webpack webpack-dev-server --save-dev
- 安装Babel loader
webpack loader用于特定格式文件的转换
npm install babel-core babel-loader --save-dev
- 安装babel-preset-es2015
babel-preset-es2015 ES6语法包，使代码可以使用ES6的新特性，const、箭头函数等
npm install babel-preset-es2015 --save-dev
- 安装babel-preset-react
babel-preset-react React语法包，用于React优化，让代码可以使用React ES6 classes的写法，同时支持JSX语法格式
npm install babel-preset-react --save-dev
- 配置.babelrc
在项目根目录新建.babelrc，配置如下：
// 告诉Babel，编译JavaScript代码的时候要用这两个presets编译
{
"presets": ["es2015", "react"]
}
安装ESLint
ESLint提供一个完全可配置的代码检查规则，同时提供了非常多的第三方plugin。同时它有着ES6语法的最佳支持安装ESLint loader
npm install eslint eslint-loader --save-dev
- ESLint有很多第三方配置好的格式插件，我们使用Airbnb开发配置合集eslint-config-airbnb
// eslint-config-airbnb包括了以下3个插件，需要安装
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
npm install eslint-config-airbnb --save-dev
- 配置.eslintrc
在根目录下创建.eslintrc，并配置
module.exports = {
// 指定校验的ecma的版本，及ecma的一些特性
"parserOptions": {
"ecmaVersion": 8, //指定ECMAScript支持的版本，6为ES6
"sourceType": "module" //指定来源的类型，有两种”script”或”module”
},
// Environment可以预设其他环境的全局变量，如brower、node、es6、mocha环境变量等
"env": {
"es6": true,
"node": true,
"browser": true,
},
// 指定你所要使用的全局变量
"globals": {
"document": true,
"navigator": true,
"window":true,
"node":true
},
// 使用第三方Airbnb开发配置合集eslint-config-airbnb
"extends": "airbnb",
// eslint-config-airbnb包括了以下3个插件
"plugins": [
"react",
"jsx-a11y",
"import"
],
"rules": {
"comma-dangle": ["error", "never"], // 列表或数组末尾不允许逗号
"indent": ["error", 4], // 4缩进
'no-console': ["error", { allow: ["info", "warn", "error"] }]
}
};
这个配置文件的意思是直接继承airbnb的默认配置规则，同时写入自己的规则，会覆盖默认规则。这里的自定义规则允许对象或数组的最后一项可以不加逗号。
- 安装webpack针对css文件转换的loader
npm install style-loader css-loader --save-dev
- 安装webpack插件html-webpack-plugin
html-webpack-plugin，用来生成HTML页面，并引入正确的JavaScript依赖
npm install html-webpack-plugin --save-dev
- 配置webpack
在项目根目录下创建app文件夹，新建webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
// 一些常用路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
entry: {
app: path.resolve(APP_PATH, 'app.jsx')
},
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
// 开启dev source map
devtool: 'eval-source-map',
// 开启 webpack dev server
devServer: {
historyApiFallback: true,
hot: true,
inline: true
//progress: true
},
resolve: {
extensions: ['.js', '.jsx']
//root: APP_PATH
},
module: {
// 配置preLoaders, 将eslint添加进去
loaders: [
{
test: /\.jsx?$/,
loaders: ['eslint-loader'],
include: APP_PATH,
enforce: 'pre'
}, {
test: /\.jsx?$/,
loaders: ['babel-loader'],
include: APP_PATH
}
]
},
// 配置plugin
plugins: [
new HtmlwebpackPlugin({
title: 'My first react app'
})
]
};
上面的配置把app文件夹的app.jsx作为入口，用配置好的babel-loader处理它，在Babel处理前先用ESLint检查代码格式，最后使用HtmlwebpackPlugin在build文件夹中生成处理后的HTML文件。我们还添加了一个resolve的参数，把JSX扩展名添加进去，从而支持JS中import加载JSX扩展名的脚本。
- 在npm中添加webpack的自定义命令
"scripits": {
"build": "webpack",
"dev": "webpack-dev-server --hot"
}
- 把React库添加到项目中
npm install react react-dom --save
- 新建app.jsx文件
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
<h1>Hello React!</h1>
</div>
);
}
};
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);
- 运行
npm run dev
webpack-dev-server会新建一个基于Express的服务器，打开浏览器http://localhost:8080 发现大标题，但是打开控制台或终端，会发现出现一些ESLint错误。将代码修改成如下即可：
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
<div className="container">
<h1>Hello React!</h1>
</div>
);
}
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);
- 安装Babel的preset，实现组件热加载
npm install babel-preset-react-hmre --save-dev
- 再次配置.babelrc
{
"presets": ["react", "es2015"],
// 在开发的时候才启用HMR和Catch Error
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
如果你是用react-redux开发，那么下面这些也要安装：
npm install --save redux
npm install --save react-redux
npm install --save react-thunk
npm install --save redux-logger
npm install --save redux-promise-middleware
npm install --save-dev redux-devtools
