antd-mobile環境搭建詳細步驟以及遇到的坑
阿新 • • 發佈：2018-12-25
1、建立專案，這裡使用dva新建專案
dva new YGAntdMobileDemo2、安裝antd-mobile
npm install antd-mobile --save3、按需載入，安裝babel-plugin-import
官網強烈推薦使用，可以提高打包的編譯速度和瀏覽器下載資源的速度，babel-plugin-import 可以從元件庫中僅僅引入需要的模組，而不是把整個庫都引入，從而提高效能
npm install babel-plugin-import --save-dev4、將原有的.roadhogrc檔案修改為.roadhogrc.js，配置檔案如下
import pxtorem from 'postcss-pxtorem'; const path = require( 'path' ); export default { entry : "src/index.js" , disableCSSModules : true , cssModulesExclude:[ './src/index.css' ], publicPath : "/go-nifty/pp/app/index/" , autoprefixer : { browsers : [ "iOS >= 8" , "Android >= 4" ] } , extraPostCSSPlugins : [ pxtorem( { rootValue : 100 , propWhiteList : [] , } ) , ] , extraBabelPlugins : [ "transform-runtime" , [ "import" , { libraryName : "antd-mobile" , "libraryDirectory" : "lib", "style": true } ] ] , env : { development : { "extraBabelPlugins": [ "dva-hmr", "transform-runtime" ] } } };
以上程式碼段注意點：
1>、extraBabelPlugins節點下是元件按需載入主要配置項
注意：樣式必須載入 less 。保持 babel-plugin-import 的 style 屬性配置為 true。
2>、執行會報錯，安裝postcss-pxtorem（移動端採用Flexible將px轉換rem適配）
npm install postcss-pxtorem5、新增 webpack.config.js，配置檔案如下
const path = require('path'); const pxtorem = require('postcss-pxtorem'); let webpack = require('webpack'); const vendors = [ 'react', 'react-dom', 'react-redux', 'react-router', 'react-router-redux', 'redux', ]; module.exports = function (webpackConfig, env) { webpackConfig.entry = { index: './src/index.js', vendor: vendors, }; const svgDirs = [ require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 屬於 antd-mobile 內建 svg 檔案 path.resolve(__dirname, 'src/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 if (webpackConfig.module.loaders && Array.isArray(webpackConfig.module.loaders)) { 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 外掛處理 }); } webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'], minChunks: Infinity, })); return webpackConfig; };
以上程式碼段注意點：
1>、Array.isarray(XXX)的方法必須加上，不然會報錯：TypeError: Cannot read property 'forEach' of undefined
2>、編譯過程中報錯指定的CSS檔案無法匯入，報錯
Module parse failed .css Unexpected token (1:0) You may need an appropriate loader to handle this file type
（並沒有找到為什麼會這樣，然後配置完成之後安裝以下外掛，再編譯又通過了。。。。。。）
配置支援svg圖片，需要安裝外掛
npm install --save-dev gulp-svg-sprites
npm i svg-sprite-loader6、高清方案配置，修改index.ejs檔案，將Viewport的設定通過一個js指令碼來代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 原來的meta配置 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 更改後的配置，將viewport的設定通過一個js指令碼代替 -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script>
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
// 原來值為100，修改為200了，則正常展示了，此處修改待考究
flex(200, 1);
</script>
<title>登入系統</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="root"></div>
</body>
</html>在執行時，開始元件超級大，後來在谷歌上只展示50%的大小，就修改了flex裡的值為200頁面就正常展示了
7、頁面測試，修改indexPage.js頁面，執行成功
import React from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { connect } from 'dva';
function IndexPage() {
return (
<div>
<NavBar
mode="light"
icon={<Icon type="left" />}
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>標題啊喂</NavBar>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm start1>、新建themes資料夾，新增default.less檔案，內容如下
@import '~antd-mobile/lib/style/themes/default.less';
// 背景色
@fill-base: #e9102d;
// @fill-base: #fff; // 元件預設背景，設定修改後的色值
@fill-body: #f5f5f9; // 頁面背景
// 全域性/品牌色
@brand-primary: #e9102d;注意：只需寫出要覆蓋的變數即可（不需要覆蓋的變數不要寫）
2>、新建theme.config.js檔案，內容如下
const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');
module.exports = () => {
const themePath = path.join(__dirname, './themes/default.less');
return lessToJs(fs.readFileSync(themePath, 'utf8'));
};通過 less-vars-to-js 的工具讀取 less 檔案變數，安裝 less-vars-to-js
npm install less-vars-to-js
3>、配置在.roadhogrc.js下的theme欄位，theme可以配置為物件或檔案路徑
theme : "./theme.config.js" ,