美文网首页
create-react-app 中配置 babel-plugi

create-react-app 中配置 babel-plugi

作者: mosband | 来源:发表于2020-02-10 11:31 被阅读0次

    鉴于 antd 官方文档使用 babel-plugin-import描述不够清楚,故写此文记录具体配置步骤。

    1、npm run eject

    在项目根路径下打开命令行,运行

    npm run eject

    如果使用了git,请确保执行此命令前没有未提交的内容
    运行完毕后项目路径下会多出configscripts文件夹,此外package.json 的内容也会发生改变,其中包括新增的babel节点。

    2、修改 package.json 配置

    package.json中的babel节点添加plugins子节点,具体如下

    {
      // ...
      "babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
          [
            "import",
            {
              "libraryName": "antd",
              "style": "css"
            }
          ]
        ]
      }
    }
    

    再次启动项目,此时无需在代码中引入antd/dist/antd.css,按钮也可正常显示

    import React, { Component } from "react";
    import { Button } from "antd";
    // 配置了按需加载就不需要了
    // import "antd/dist/antd.css";
    class AntdDemo extends Component {
      render() {
        return (
          <div>
            <Button type="primary">
              Button
            </Button>
          </div>
        );
      }
    }
    
    export default AntdDemo;
    
    

    相关文章

      网友评论

          本文标题:create-react-app 中配置 babel-plugi

          本文链接:https://www.haomeiwen.com/subject/qeswxhtx.html