使用Create-React-App脚手架创建antd-mobile开发环境 （附 github 源码）

Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。

使用的原因以及特性：

• 无需配置；
• 集成了对 React, JSX, ES6 和 Flow 的支持；
• 集成了开发服务器；
• 配置好了浏览器热加载的功能；
• 在 JavaScript 中可以直接 import CSS 和图片；
• 自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
• 集成好了编译命令，编译后直接发布成产品，并且还包含了 sourcemaps。

创建项目

npm install -g create-react-app       /* 安装create-react-app，建议使用cnpm */

create-react-app register                 /* 使用命令创建应用，myapp为项目名称 */

cd register                                 /* 进入目录，然后启动 */

npm start

生成的项目目录：

在webstorm中输入 npm start 在浏览器中即可看到欢迎页面

antd-mobile的引入及配置

执行命令行：

npm install antd-mobile --save

按需引入

执行命令行：

yarn add react-app-rewired --dev

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

yarn add babel-plugin-import --dev

+ const { injectBabelPlugin } = require('react-app-rewired');
  module.exports = function override(config, env) {
+   config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
    return config;
  };

更改引用方式

- import Button from 'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';

使用表单时，受控组件要安装 rc-form

npm install rc-form --save-dev

运行时输入：

yarn start

示例代码在github上 ：https://github.com/wushuxuan/Ant-Design-Mobile-

1. 下载项目到本地

2. 安装依赖

   npm install
   

1. 输入 yarn start , http://localhost:3000/ 显示成功。

---

项目配置

生成项目后，脚手架为了“优雅”隐藏了所有的webpack相关的配置文件，此时查看myapp文件夹目录，会发现找不到任何webpack配置文件。执行以下命令：

npm run eject

运行时是直接执行scripts文件目录下的js文件

使用 React Router说明

注意：

1. Node 的版本必须 >= 4，推荐 Node >= 6 and npm >= 3；
2. 运行起来后浏览器已经实现了热加载刷新，修改代码保存后浏览器会自动刷新；
3. 执行 npm test 或 yarn test 可以执行测试动作，更多请参阅这里；
4. 编译项目执行 npm run build 或 yarn build；