开发前准备
# 开发前准备
- 基础脚手架：react-boilerplate (opens new window)
- 企业管理系统脚手架：react-boilerplate-pro (opens new window)
- 侧边栏组件：react-sider (opens new window)
- 包含鉴权的路由：react-acl-router (opens new window)
- 国际化多语言文件注入：react-intl-context (opens new window)
- react-infinity-menu (opens new window)
- redux-unhandled-action (opens new window)
- react-image-fallback (opens new window)
- react-user-tour (opens new window)
所有项目中需要用到的第三方依赖都在项目的 package.json 以及 yarn.lock 中有所体现
react: 16.4.2
react-dom: 16.4.2
redux: 4.0.0
redux-thunk: 2.3.0
react-router-dom: 4.3.1
connected-react-router: 4.3.0
antd: 3.6.6
webpack: 4.16.5
babel-core: 6.26.3
eslint: 5.3.0
jest: 23.4.2
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
添加 HTML5 新引入的 viewport 属性
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1
# Babel 配置
.babelrc 作为 Babel 的配置文件，最核心的两部分就是 presets 以及 plugins。
presets 代表了 Babel 配置的核心部分。其中 babel-preset-env 整合了 es2015、es2016、es2017 三个原先独立的 preset，开发者只需要引入 env 这样一个 preset 就可以安全地使用上述三个版本中包含的 JavaScript 新特性。
plugins 更像是对 presets 的一个补充，供开发者们去自定义一些 presets 之外的功能，其中比较常用的如对象扩展符 ... 就需要引入 babel-plugin-transform-object-rest-spread 开启。除了 JavaScript 部分的扩展外，Babel 对 React 也有着相应的支持，如将 JSX 编译为 React 原生的 React.createElement 方法以及为 React 组件添加 displayName 属性等。
Babel 作为一个基于插件系统打造的 JavaScript 编译工具，其可定制度是非常高的，开发者们完全可以根据自己的使用需要与编码习惯去选择或开发合适的插件以达到提升开发效率的效果。