欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【前端】react脚手架 + antd的craco.config.js配置

程序员文章站 2022-03-13 09:10:04
react脚手架 + antd的craco.config.js配置拉取脚手架执行以下命令标题安装antd修改 src/App.js,引入 antd 的按钮组件修改 src/App.css,在文件顶部引入 antd/dist/antd.css高级配置安装 craco 并修改 package.json 里的 scripts 属性然后在项目根目录创建一个 craco.config.js 用于修改默认配置自定义主题然后安装 craco-less 并修改 craco.config.js 文件如下支持装饰器语法和配置代...

拉取脚手架执行以下命令
$ npx create-react-app antd-demo   ->       启动 cd antd-demo   ->   yarn start
标题安装antd
yarn add antd
修改 src/App.js,引入 antd 的按钮组件
import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;
修改 src/App.css,在文件顶部引入 antd/dist/antd.css
@import '~antd/dist/antd.css';     //可以在页面看到蓝色按钮组件了

高级配置

安装 craco 并修改 package.json 里的 scripts 属性
yarn add @craco/craco
/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}
然后在项目根目录创建一个 craco.config.js 用于修改默认配置
/* craco.config.js */
module.exports = {
  // ...
};

自定义主题

/* src/App.js */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
然后安装 craco-less 并修改 craco.config.js 文件如下
yarn add craco-less

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

支持装饰器语法和配置代理

yarn add @babel/plugin-proposal-decorators --dev //用来支持装饰器

//在craco.config.js文件下的module.exports添加如下代码
 babel:{  
    plugins: [
      ["@babel/plugin-proposal-decorators", { legacy: true }]
    ]
 },

//配置代理解决跨域
devServer: {
    proxy: {
         "/api": {
             target: "http://baidu.com",  
             //target: 'http://192.168.9.19:8080',
             changeOrigin: true,
             pathRewrite: {
                 "^/api": ""
             }
         }
     }
 }

配置antd的less按需加载(则反打包后,会增大css文件)

yarn add babel-plugin-import

//在craco.config,.js里加上

babel:{  
    plugins: [
      ["@babel/plugin-proposal-decorators", { legacy: true }],  //装饰器
      [   
        "import", 
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
           "style": true //设置为true即是less
         }
     ]
    ]
 },

到App.less文件去掉@import '~antd/dist/antd.less';//按需加载后只需引入组件,无需再额外引入样式文件,babel会自动按需帮你完成样式的引入。这样打包出来的文件会更小。

配置别名

//在craco.config,.js里加上
const path = require('path');
module.exports = {
  webpack: {
    // 别名
    alias: {
      "@": path.resolve("src"),
      "@utils": path.resolve("src/utils"),
    }
  },
}

本文地址:https://blog.csdn.net/weixin_44815500/article/details/114003428

相关标签: react