抛开各种脚手架工具,徙手搭建React开发环境,实现代码自动编译、ESLint规范检测、本地HTTP服务、HMR热替换、Webpack打包等需求。初步感受React工程架构的各个小细节中到底做了啥。
第1步:初始化项目目录
$ mkdir react-app
$ cd react-app
$ npm init --yes
第2步:安装Babel。目的是让代码支持ES6语法,同时支持React特性(例如JSX语法等)。
$ cnpm install babel-preset-es2015 -D // 支持ES6语法
$ cnpm install babel-preset-react -D // 支持react特性和JSX语法
$ cnpm install bable-core -D // babel核心模块
$ cnpm install babel-loader -D // babel-loader,用于webpack
第3步:配置.babelrc
{
// 告诉Babel,编译JS代码时,使用这两个preset来编译
"presets": ["es2015", "react"],
// 在开发环境时,才启用HMR功能
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
第4步:安装ESLint
$ cnpm install eslint -D
$ cnpm install eslint-loader -D // 用于webpack-preLoader
使用Airbnb提供的第三方ESLint格式插件
$ cnpm install eslint-config-airbnb -D
$ cnpm install eslint-plugin-import -D
$ cnpm install eslint-plugin-react -D
$ cnpm install eslint-plugin-jsx-a11y -D
第5步:配置.eslintrc
{
// 指定继承airbnb提供的ESLint格式规则
"extends": "airbnb",
// 修改默认的lint规则
"rules": {
"comma-dangle": ["error", "never"],
"linebreak-style": [0]
}
}
第6步:安装webpack
$ cnpm install webpack -D
$ cnpm install webpack-dev-server -D // 用于devServeer
$ cnpm install html-webpack-plugin -D
$ cnpm install babel-preset-react-hmre -D // 用于热替换
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const APP_PATH = path.join(__dirname, '/app')
const BUILD_PATH = path.join(__dirname, '/dist')
const MODULE_PATH = path.join(__dirname, '/node_modules')
const config = {
// 入口配置
entry: {
app: './app/app.jsx'
},
// 输出配置
output: {
filename: 'bundle.js',
path: BUILD_PATH
},
// 开启source-map调试
devtool: 'eval-source-map',
// 开启devServer
devServer: {
contentBase: BUILD_PATH,
port: 8899,
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
// 配置resolve规则
resolve: {
extensions: ['.js', '.jsx', '.json']
},
// 配置eslint和loaders
module: {
rules: [
{
enforce: 'pre',
test: /.(jsjsx)$/,
loader: 'eslint-loader',
exclude: [
MODULE_PATH
]
},
{
test: /.jsx$/,
loader: 'babel-loader',
exclude: [
MODULE_PATH
]
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: [
MODULE_PATH
]
}
]
},
// 配置plugins
plugins: [
new HtmlWebpackPlugin({
title: 'react demo',
template: './index.html'
})
]
}
module.exports = config
第8步:在package.json中自定义npm scripts命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot"
}
// 命令行使用
$ npm run build // 打包项目
$ npm run dev // 启动项目
第9步:安装React核心库
$ cnpm install react -S
$ cnpm install react-dom -S
第10步:开始React编码( ./app/app.jsx )
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
Hello World.
);
}
const app = document.createElement('div'); // eslint-disable-line
document.body.appendChild(app); // eslint-disable-line
ReactDOM.render(, app);
最终项目目录结构如下:
--app目录,是源码存放的主目录,在这里就可以写react代码了。--dist是由webpack打包后的最终代码。
参考资料:张轩《React全栈整合开发》
领取专属 10元无门槛券
私享最新 技术干货