从0开始React最新技术栈框架配置（非服务端渲染）

写于2018-03-27
参考Demo：https://github.com/javaLuo/react-app

基本

最基本的将包含以下框架及插件

• react@16.x
• react-router@4.x
• redux@3.x
• webpack@4.x

将要用到以下开发工具

• node.js
• webstorm
• yarn (npm install yarn -g)

---

一、这就开始了

你可以使用官方维护的 create-react-app 生成一个新项目，但生成出来仅包含了最基本的react。
本文不使用create-react-app，但目录结构会和官方保持一致。

1、创建新项目

• 打开node.js控制台，进入某个目录
• 运行以下命令，生成一个全新的package.json

yarn init

2、引入react、react-router、redux相关插件

yarn add react              // react核心
yarn add react-dom          // 新版本react单独提取了渲染相关函数
yarn add react-router-dom   // 前端路由器
yarn add redux              // redux核心
yarn add react-redux        // 为了把react组件挂载到redux
yarn add react-router-redux // 为了保持状态与路由同步
yarn add react-loadable     // 代码分割按需加载
yarn add prop-types         // 检查传入子组件的props参数类型，有效防止忘记子组件有哪些props参数
yarn add history            // 第3方的history，比较好用。也可以用react-router自带的

除此之外还需要选择一种处理异步action的redux中间件
redux-thunk 或 redux-saga 或 redux-promise

yarn add redux-thunk

然后是webpack

yarn add webpack -D                 // webpack核心
yarn add webpack-cli -D             // 4.0以后需要这个来进行build
yarn add webpack-dev-middleware -D  // 小型服务器
yarn add webpack-hot-middleware -D  // HMR热替换插件
yarn add clean-webpack-plugin -D    // 打包时自动删除上一次打包的旧数据
yarn add extract-text-webpack-plugin@next -D    // 提取CSS，生成单独的.css文件
yarn add html-webpack-plugin -D     // 通过模板生成index.html，自动加入script/style等标签

也可以使用webpack内置的webpack-dev-server配合react-hot-loader实现HMR

---

接下来需要相关的webpack解析器(虽然应该先安装这些解析器的依赖项，不过等会儿再装)

yarn add babel-loader -D    // 解析js文件中的ES6+/JSX语法
yarn add css-loader -D      // 解析css模块（import的css文件）
yarn add eslint-loader -D   // 打包前检测语法规范要用
yarn add file-loader -D     // 解析所有的文件（字体、视频、音频等）
yarn add url-loader -D      // 与file-loader类似，但可以把小图片编码为base64
yarn add postcss-loader -D  // 自动为css添加-webkit-前缀等功能
yarn add less-loader -D     // 解析.less文件
yarn add sass-loader -D     // 解析.scss/.sass文件
yarn add style-loader -D    // 自动将最终css代码嵌入html文件(<style>标签)
yarn add csv-loader -D      // 解析office的表格excel文件
yarn add xml-loader -D      // 解析xml文件

以上的部分解析器需要相关依赖,也需要额外的插件优化项目

yarn add babel-core -D          // babel核心，babel-loader依赖
yarn add less -D                // less-loader依赖
yarn add node-sass -D           // sass-loader依赖
yarn add autoprefixer -D        // postcss的插件
yarn add eslint -D              // eslint代码规范检测器
yarn add babel-eslint -D        // 让eslint支持一些新语法
yarn add babel-plugin-transform-class-properties -D  // 支持类中直接定义箭头函数
yarn add babel-plugin-transform-decorators-legacy -D // 支持ES8修饰器
yarn add babel-plugin-syntax-dynamic-import -D       // 支持异步import语法
yarn add babel-runtime -D       // 各种浏览器兼容性垫片函数
yarn add babel-plugin-transform-runtime -D  // 避免重复编译babel-runtime中的代码
yarn add babel-preset-env -D    // 自动识别浏览器环境运用对应的垫片库兼容ES6+语法
yarn add babel-preset-react -D  // 让babel支持解析JSX语法
yarn add eslint-plugin-react -D // 让eslint支持检测JSX语法

还需要一个node.js的后端框架，为了启动一个服务。选择express或koa。
你也可以用webpack自带的webpack-dev-server命令行模式来启动本地服务。
但自己配置会有更高的自由度，比如之后可以配置mock.js模拟数据等。

yarn add express -D

3、开始手动新建项目结构

关于结构：最佳实践是按照业务模块来分store/action/router,
可以按照自己的喜好创建不同的文件夹，
本文为了简单是按照功能来划分的。你可以在构建大型系统时按照最佳实践的方式划分。

二、开始各项配置

1、配置/.babelrc文件

{
  "presets": [
    "babel-preset-env",    支持ES6+新语法
    "babel-preset-react"   支持react相关语法（JSX）