1.按照官网步骤进行，
$ npm install -g create-react-app
# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app
$ cd my-app
$ npm install antd-mobile --save
入口页面 (html 或 模板) 相关设置：
<
script
>
if ('addEventListener' in document)
{
document.
addEventListener(
'DOMContentLoaded',
function() {
FastClick.
attach(
document.
body);
},
false);
}
if(!window.Promise)
{
document.
writeln(
'<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+
'>'+
'<'+
'/'+
'script>');
}
</
script
>
按需加载#
引入 react-app-rewired 并修改 package.json 里的启动配置:
$ npm install react-app-rewired --save-dev
/* package.json */
"scripts": {
-
"start"
:
"react-scripts start",
+
"start"
:
"react-app-rewired start",
-
"build"
:
"react-scripts build",
+
"build"
:
"react-app-rewired build",
-
"test"
:
"react-scripts test --env=jsdom",
+
"test"
:
"react-app-rewired test --env=jsdom",
}
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
$ npm install babel-plugin-import --save-dev
const {
injectBabelPlugin } =
require(
'react-app-rewired');
module.
exports =
function
override(
config,
env) {
config =
injectBabelPlugin([
'import', {
libraryName:
'antd-mobile',
style:
'css' }],
config);
return
config;
};
所有步骤进行之后，恭喜你，踏入react-mobile第一坑，报错：
The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins
原因： react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired;然后 react-app-rewired 升级到 2.x 以后直接干掉了所有 helpers。react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired;然后 react-app-rewired 升级到 2.x 以后直接干掉了所有 helpers。
解决方法：把react-app-rewired 进行降级后可以了，即
$ yarn add [email protected] 安装低版本的react-app-rewired以后，重新npm install，再运行yarn start，即可解决问题，实现antd按需引入