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还有个高清方案，这个也是全都是坑，请看下一篇博客。