ant-design-mobile框架踩坑（一）

一直在用ant.design桌面版，现在推出了移动版，必须研究一下，但是这不看不要紧，一看就遇到了好多坑，好多坑···

1.根据官方文档，使用dva脚手架生成项目目录，这样简单一些，如果你喜欢自己创建文件夹的感觉，你也可以自己创建自己的目录结构。由于是试验可用性，我就用了dva生成了个目录结构；

$ dva new mobileApp

创建完成后，已经是npm install过了，所以不需要重新下载依赖。

2.按需加载ant mobile组价的js和css。

首先安装依赖

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

修改roadhog（可以理解为简化版的webpack）的配置文件.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" }]
      ]
    }
  }
}

3.配置支持Icon，这个真是很重要的，也是很有用的，在移动端，如果没有Icon，那是多么的痛苦；
这个配置在官网说的不是很清楚，首先解释下，roadhog这个没有处理Icon的功能，但是他有webpack的接口，也自动寻找项目根目录下的webpack.config.js文件，读取里面的配置；所以通过在项目根目录中添加webpack.config.js文件来配置Icon的svg的loader。（真是神坑啊）

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/assets'),  // 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;
}

这里配置完了，运行的话，还是不行，你会发现没有安装`svg-sprite-loader`，新想这个简单，直接npm install安装就好了，安装结束后，再运行，还是报错，经错查资料发现：如果你的ant-mobile的版本是`1.x`的话`svg-sprite-loader`的版本必须是`svg-sprite-loader@^0.3.1`。
······
可是目前ant mobile的最高版本才是1.6啊亲。

所以：

$ npm install svg-sprite-loader@0.3.1 --save-dev

4.配置玩这些，你就可以写个demo了，但是这里又出现了问题，为毛我打开浏览器手机模式后，页面中的字体，图标都大一倍。机智的我想到的肯定是viewport的问题。所以index.html中的修改：

将生成的publick/index.html文件中的viewport修改成：

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

好了，这个就可以了。

ant mobile还有个高清方案，这个也是全都是坑，请看下一篇博客。