如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目
引言：
create-react-app是Facebook发布的一款全局的命令行工具用来创建一个新的项目。
通常我们开始做一个react 项目的时候，都会自己利用 npm 或者 yarn 安装项目所需要的一些依赖，再写 webpack.config.js ,一系列复杂的配置,搭建好开发环境后写src源代码。
现在，如果你想要搭建一个完整的 react 项目环境，已经不需要自己动手布置许许多多的东西，利用 create-react-app 工具，就能轻松帮你配置好一个 react 项目。
全局安装 create-react-app
npm i create-react-app -g
创建一个应用程序
create-react-app ProjectName
然后你可以看到创建完之后的目录结构
my-app/ --README.md --node_modules/ --package.json --.gitignore --public/ -----favicon.ico -----index.html --src/ -----App.css -----App.js -----App.test.js -----index.css -----index.js -----logo.svg
你会发现在整个项目文件夹中，并没有 webpack.config.js 文件，这时候你只需要在项目目录中执行 npm run eject 命令，你会看到他提示你 Are you sure you want to eject? This is permanent. 输入y 然后回车，打开项目文件夹你会发现多了两个目录（ public 、 scripts），像这样：
试着运行一下项目，输入 npm run start 回车，浏览器会自动打开一个地址为 http://localhost:3000 的页面，端口号为3000.
到这里，一个react项目基本上已经搭建完成了，现在我们为项目引入 ant design mobile 框架。
使用yarn安装： yarn add antd-mobile 使用npm安装： npm install antd-mobile -D
安装其他的一些开发依赖
yarn add --dev babel-plugin-import svg-sprite-loader@0.3.1 less less-loader postcss-pxtorem
接下来是项目的配置：
打开 config 文件夹中的 webpack.config.dev.js 文件，在 webpack.config.dev.js 中找到 exclude 追加两行代码，用于加载 less 和 svg 文件
module.exports = { module: { rules: [ ... { exclude: [ /\.html$/, /\.js$/, /\.json$/, /\.less$/,//追加 /\.svg$/,//追加 ], ... } ] } }
添加按需加载文件处理插件
module.exports = { module: { rules: [ { test: /\.(js|jsx)$/, ... options: { //追加 plugins: [ ['import', { libraryName: 'antd-mobile', style: true }], ], ... }, }, ] } }
添加svg处理
module.exports = { module: { rules: [ ... { test: /\.(svg)$/i, loader: 'svg-sprite-loader', include: [ require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile使用的svg目录 path.resolve(__dirname, '../src/'), // 个人的svg文件目录，如果自己有svg需要在这里配置 ] }, ... ] } }
添加less处理
module.exports = { module: { rules: [ ... { test: /\.less$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ autoprefixer({ browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], }), pxtorem({ rootValue: 100, propWhiteList: [] }) ], }, }, { loader: require.resolve('less-loader'), options: { modifyVars: { "@primary-color": "#1DA57A" }, }, }, ], } ... ] } }
在此之前必须要引入 postcss-pxtorem 模块，用于px转rem
const pxtorem = require('postcss-pxtorem');
重新启动项目，但是你会发现react的Logo没了。此时就轮到 antd-mobile 闪亮登场了。
在 src/App.js 中导入antd-mobile的Icon,代码如下：
import React, { Component } from 'react';
import {Icon} from 'antd-mobile';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<Icon type={logo} />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
最后是使用antd-mobile提供的高清解决方案，你可以参考官方文档或者按照以下步骤：
- 下载未压缩的 viewport.js 或者在压缩版的 viewport.min.js
- 在 public 目录下的 index.html 中引入下载好的js，请内联写到所有 css 引用之前, 否则部分安卓机有问题，并且不要再设置meta标签的viewport
- 打开config/webpack.config.dev.js，新增一句代码
{ test: /\.css$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, } }, { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), pxtorem({ rootValue: 100, propWhiteList: [] }) //新增 ], }, }, ], },
重启项目，你会发现css单位由px转为了rem。
