使用Create-React-App脚手架搭建antd-mobi
在本文撰写之时，按照官方在线文档https://mobile.ant.design/docs/react/use-with-create-react-app-cn的步骤搭建antd-mobile的环境，CSS样式无法生效。研究了一下，特此做一个记录，希望能帮助到更多的人。
第一步：安装官方脚手架 create-react-app，命令如下，mac系统下安装的自行在npm前添加$即可.
npm install -g create-react-app
建议使用淘宝镜像安装，速度会更快一些命令如下：
cnpm install -g create-react-app
安装好后，就可以用如下命令建立你的react应用了，其中的myshop是你自己取的项目名称
create-react-app myshop
有不少同学在进行此步骤来创建一个新的React应用时由于某原因,在拉取各种资源过程中往往会巨慢，这里提出一个解决办法，就是将下载资源的地址永久设置为淘宝的镜像。
npm config set registry https://registry.npm.taobao.org
然后我们在验证一下
npm config get registry
--或 npm info express
这样设置后，在运行create-react-app命令建立项目 ，你会发现快了好多，而且通常情况下都能顺利完成；
之后进入项目文件夹的根目录，启动项目，命令行如下：
cd myshop
npm start
此时，通常会自动启动浏览器，命令窗口显示：
Compiled successfully!
You can now view myshop in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.0.132:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
通过浏览器访问http://localhost:3000/或 http://192.168.0.132:3000/应该可以看到欢迎画面了，进行到这里说明通过Create-React-App脚手架创建的项目成功启动！
打开编辑器，笔者使用的Atom，此时目录结构为下图所示：
我新建的项目myshop的目录结构
自己配置过webpack的同学可能会发现，“好像少点什么？”，create-react-app脚手架工具对webpack配置文件进行了隐藏，为了能够顺利的搭建antd-mobile，我们需要让配置文件“显示出来”，命令如下：
npm run eject
小提示：运行前您可能需要按CTRL+C退出启动的项目
运行后，发现它会执行一系列安装..出现如下结果说明成功完成：
Running npm install...
added 117 packages and updated 1 package in 14.894s
Ejected successfully!
Please consider sharing why you ejected in this survey:
http://goo.gl/forms/Bi6CZjk1EqsdelXk1
这时，我们发现多了一个项目文件夹，config，具体如下：
npm run eject执行后项目中多出了一个叫config的文件夹
为了阅读这篇文章的同学后面少些坑，我们顺手解决下打包路径的问题。用create-react-app脚手架搭建的react项目使用 npm run build 之后生成的打包文件只能在根目录访问，这样放在服务器目录就访问不到了，为了你们不要和我一样打包后在哭着百度解决方案，在这里一并放出：
config文件夹下面找到paths.js文件，打开后大约在34~39行前后有如下代码：
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
}
将这句修改为：(仔细看，最后面的"/"前面加了一个".")
const servedUrl =envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
下面进行LESS CSS预处理器配置，antd-mobile依赖LESS模块，不安装和配置好，样式是不会起作用的，在项目根目录运行如下命令：
cnpm install less less-loader --save-dev
这里面注意下 less 和 less-loader 都是需要安装的，不然在启动项目时就会报Error in Cannot find module 'less' 原因是npm @ 3不能再解析peerDependencies了，OK安装后，我们还要着手配置下，打开config文件夹中的webpack.config.dev.js文件，搜索“exclude:” 找到大概这么一行：
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader')
... ...
在exclude: 后面的数组中加入一项 /\.less$/ 这行变为
exclude: [/\.js$/, /\.html$/, /\.json$/,/\.less$/],
然后在loders中加入一段：
//新增less支持
{ 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: () => [ pxtorem({ rootValue: 100, propWhiteList: [], }), autoprefixer({ browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], }), ], }, }, { loader: require.resolve('less-loader'), options: { modifyVars: { "@primary-color": "#1DA57A" }, }, }, ], },
搞不清楚loders结构的同学，找下如下代码，加在其最后一个花括号下方即可：
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
['import', { libraryName: 'antd-mobile', style: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
一模一样的方式在 config文件夹里的webpack.config.prod.js里在做一遍，这步配置就完成了。接下来安装babel-plugin-import ，然后就可以按需加载组件了，并且它会自动关联css样式，无需单独引入。我们只需要这样引入一次即可：import { Button } from 'antd-mobile';详细的见官网吧。
cnpm install babel-plugin-import --save-dev
安装完毕后,在webpack.config.dev.js中找到这段代码按如下配置:
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
['import', { libraryName: 'antd-mobile', style: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
至此，Create-React-App脚手架搭建antd-mobile并进行按需加载的开发环境配置完毕！
