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

2019独角兽企业重金招聘Python工程师标准>>>

• 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>
  

转载于:https://my.oschina.net/KJhulinhua/blog/3037407