react 最新配置 antd 、antd-mobile 按需加载

原创
2019/04/16 10:40
阅读数 882
  • create-react-app ext_medical 创建一个新的项目

  • yarn add antd-mobile 引入antd-mobile

  • yarn add react-app-rewired@2.0.2-next.0 -D 这里一定要@2.0.2-next.0,新版的Babel7有点问题,直接react-app-rewired会报错

  • package.json 中修改

      /* 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 用于修改默认配置。

      const { injectBabelPlugin } = require("react-app-rewired");
      module.exports = function override(config, env) {
        config = injectBabelPlugin(
      	["import", { libraryName: "antd-mobile", style: "css" }],
      	config
        );
        return config;
      };
    
  • 测试效果

      import { Button } from "antd-mobile";
      <Button loading={true}>3456asfdgr</Button>
    

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部