写下此文章的初衷：最近项目需要架构升级，然而由于create-react-app升级到@2.x的原因，又因为想享受CRA升级带来的便利，不想eject项目，所以任何不想eject的同学，都可以了解一下这篇文章，开始我们的旅途吧
简介：本文共分为4部分，第一部分安装create-react-app，第二部分安装ant-mobile,第三部分：安装less,第四部分安装viewport各部分依赖
一、项目基础，安装create-react-app脚手架，创建create-react-app项目my-app
1、在全局环境安装create-react-app工具
在任意文件夹执行以下命令：
npm isntall -g create-react-app
2、用create-react-app工具创建我的第一个项目my-app
进入放置项目my-app的文件夹，执行以下命令：
/**创建项目my-app，并进入项目my-app文件夹*/
create-react-app my-app && cd my-app
启动我的项目my-app只需执行命令:
npm start
到这一步，其实你已经完成react大部的插件的安装，像一些：热更新、webpack、css babel等等，详细可以了解create-react-app工具。
二、安装项目UI 组件库：Ant Design Mobile
1、安装antd-mobile
npm install antd-mobile --save
2、完成component、css按需加载需要一些配置插件
引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 [email protected] 版本的关系，你需要还需要安装 customize-cra。
npm install react-app-rewired customize-cra --save-dev
/* package.json */
"scripts": {
"start": "set PORT=3006 && react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件，现在我们尝试安装它并修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd-mobile',
+ style: 'css',
+ }),
+ );
完成后，按需引入一个Button
import { Button } from 'antd-mobile';
...
...
彩蛋：当项目启动之后，你会发现是在port：3000端口运行的，如果需要换成其他端口，在my-app文件夹下，找到package.json文件，把
"start": "react-app-rewired start",
改成（在端口3006执行）：
"start": "set PORT=3006 && react-app-rewired start",
到这一步之后，如无需less和lib-flexible开发的同学，已经可以在my-app项目尽情开发啦，赶紧体验一把热更新带来的便捷吧！
但是我们一般都不满足的，css那种语言，怎么看都不像是程序，于是，less、sass、stylus这三个css预处理器就横空出世了，在本文中，我们重点了解less在create-react-app和ant-mobile环境下的安装。
三、安装less！
依旧的，进入my-app项目目录
安装less和less-loader
npm install less less-loader --save-dev
安装react-app-rewire-less来修改less配置：
npm i react-app-rewire-less --save
修改config-overrides.js文件为：
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const rewireLess = require('react-app-rewire-less');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
//modifyVars: { '@primary-color': '#1DA57A' }, // 这里不注释掉，那你的无法修改主题色primary-color 这里很坑的 要注意！
}),
);
继续修改App.css文件名为：App.less
修改App.js文件：
import './App.css';
为
import './App.less';
启动my-app,如果看到正常页面，则less加入成功。
四、添加viewport移动端自适应方案
viewport是lib-flexible方案的升级版，同学们可以了解：https://github.com/amfe/lib-flexible/
1、安装postCss插件
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced
再安装react-app-rewire-postcss支持config-overrides重写：
npm i react-app-rewire-postcss --save
2.安装完成后，在config-overrides.js加入postCss配置
const addCustomize = () => config => {
require('react-app-rewire-postcss')(config, {
plugins: loader => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
require('postcss-aspect-ratio-mini')({}),
require('postcss-px-to-viewport')({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
require('postcss-write-svg')({
utf8: false
}),
require('postcss-viewport-units')({}),
require('cssnano')({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
]
});
return config;
}
此时config-overrides.js，整个配置如下：
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const rewireLess = require('react-app-rewire-less');
const addCustomize = () => config => {
require('react-app-rewire-postcss')(config, {
plugins: loader => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
require('postcss-aspect-ratio-mini')({}),
require('postcss-px-to-viewport')({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
require('postcss-write-svg')({
utf8: false
}),
require('postcss-viewport-units')({}),
require('cssnano')({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
]
});
return config;
}
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
//modifyVars: { '@primary-color': '#1DA57A' }, # 这里不注释掉，那你的无法修改主题色primary-color 这里很坑的 要注意！
}),
addCustomize(),
);
3、引入阿里cdn
在
中引入阿里cdn
在body中，加入如下js代码：
最终index.html如下
React App
重新执行npm start打开页面,在style:.App下面发现：
content: "viewport-units-buggyfill; width: 100vw; height: 26.667vw; line-height: 26.667vw";
//如果遇到img无法显示，则添加全局css
img {
content: normal !important;
}
至此，恭喜你，你手上已经多了一个可以自适应移动端+less+antd-mobile项目了，尽情发挥你的才能吧
项目地址：https://github.com/wihtebox/my-app