antd mobile(一) 环境搭建

以前需要一个组件，大概就3步，下载、引入、测试。
现在用个组件可能就是n步了，一个下午都没把antd mobile的组件展示出来，各种坑啊，看着官方文档一步一步也还是满地坑。
吐槽就免了，还是记录下来吧：
第一步：采用dva创建项目，这个如果不会看我前面写的文章。

dva new goingMobile1

创建完后，文件结构如下：

第二步：配置antd mobile的按需加载脚本和样式
安装依赖：

npm install antd-mobile babel-plugin-import --save

修改.roadhogrc的文件：

{
  "entry": "src/index.js",
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
          "transform-runtime",
             ["import", { "libraryName": "antd-mobile", "style": "css" }]
      ]
    },
    "production": {
      "extraBabelPlugins": [
     "transform-runtime",
      ["import", { "libraryName": "antd-mobile", "style": "css" }]
      ]
    }
  }
}

第三步：配置支持ICON，官网提供了几种方式，最终采用的是添加 webpack.config.js 的方式，其他的方式都测试过没有那种可以启用。
webpack.config.js 的内容:

const path = require('path');

module.exports = function(webpackConfig, env) {
  const svgDirs = [
    require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
    // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 2. 自己私人的 svg 存放目录
  ];

  // 因为一个 SVG 文件不能被处理两遍. 在 atool-build 默认为 svg配置的svg-url-loade 里 exclude 掉需要 svg-sprite-loader处理的目录
  // https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js#L162
  // https://github.com/kisenka/svg-sprite-loader/issues/4
  webpackConfig.module.loaders.forEach(loader => {
    if (loader.test && typeof loader.test.test === 'function' && loader.test.test('.svg')) {
      loader.exclude = svgDirs;
    }
  });
  // 4. 配置 webpack loader
  webpackConfig.module.loaders.unshift({
    test: /\.(svg)$/i,
    loader: 'svg-sprite',
    include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
  });

  return webpackConfig;
}

第四步：写个测试界面：我直接修改的/src/routes/IndexPage.js
内容：

import  React,{Component} from 'react';
import { connect,dispatch } from 'react-redux' // 引入connect
import { NavBar, Icon } from 'antd-mobile';

class PersonChar extends Component {
  render() {
    return (
      <div>
        <NavBar leftContent="返回"
                mode="light"
                onLeftClick={() => console.log('onLeftClick')}
                rightContent={[
        <Icon key="1" type="ellipsis" />,
      ]}
        >个人维度</NavBar>
      </div>
    )
  }
}

// 利用connect将组件与Redux绑定起来
export default connect((personCharMd) => ({personCharMd}))(PersonChar)

界面效果是字体、图标都非常大，根本没法进行开发：
修改/public/index.html文件：
将以前的

  <meta name="viewport" content="width=device-width, initial-scale=1">

修改成：

  <meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">

执行npm start后查看效果:
界面效果：