写于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)
],
"