关于的Antd按需引入

一：React项目遇到的问题

1.使用create-react-app  <项目名>    创建项目

   运行npm run eject  弹出config文件夹

2.配置antd按需加载

  需要先安装babel-plugin-import 》npm install babel-plugin-import --save-dev/npm i babel-plugin-import -D

因为create-react-app官方脚手架升级了，没有webpack.config.dev.js和webpack.config.prod

这两个文件了，所有这里我们就在webpack.config.js配置less。

看下面》

//找到这个位置
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

//在此添加如下两个常量
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;

//找到此位置
 {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
 
//在这之后仿照上面添加如下代码
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
            },

还需要在package.json配置plugins

 "babel": {
    "presets": [
      "react-app"
    ],
//加入以下信息
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }

重新项目引用antd import{Button} from 'antd'  就成功了

import {Button,Radio} from 'antd'

function App() {
  return (
    <div >
     <Button type="primary">测试</Button>
     <Radio></Radio>
     <Button type="dashed">Dashed</Button>
    <Button type="danger">Danger</Button>
    <Button type="link">Link</Button>
    </div>
  );
}

export default App;

3.配置代码格式化

   扩展链接

我在这里用的是ESLint + Standard 项目配置  

来看我下的.eslintrc.js配置

module.exports = {
  root: true,
  // 环境，这里可以设置环来做区别判断
  env: {
    browser: true,
    commonjs: true,
    es6: true
  },
  // 使用的扩展库
  extends: ['standard', 'standard-react'],
  // 解析器用于解析代码
  parser: 'babel-eslint',
  // 解析器配置
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  // 可以全局使用变量
  globals: {
    Babel: true,
    React: true,
    PATH_ENV: true
  },
  // 第三方插件
  plugins: [],
  // 规则配置
  rules: {
    'no-unused-vars': 'off',
    semi: 0,
    'no-tabs': 'off'
  }
}

rules:{} 里面就是相关的配置规则 ，很神奇。

在根目录下再创建.editorconfig文件

我的配置

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]   
[*{scss,js,css}]

其他还有更详细的介绍 链接

root = true                         # 根目录的配置文件，编辑器会由当前目录向上查找，如果找到 `roor = true` 的文件，则不再查找

[*]                                 # 匹配所有的文件
indent_style = space                # 空格缩进
indent_size = 4                     # 缩进空格为4个
end_of_line = lf                    # 文件换行符是 linux 的 `\n`
charset = utf-8                     # 文件编码是 utf-8
trim_trailing_whitespace = true     # 不保留行末的空格
insert_final_newline = true         # 文件末尾添加一个空行
curly_bracket_next_line = false     # 大括号不另起一行
spaces_around_operators = true      # 运算符两遍都有空格
indent_brace_style = 1tbs           # 条件语句格式是 1tbs
spaces_around_brackets              # 表示括号和括号之间应有空格：无空格，仅在括号内，仅在括号外或在括号的两侧 （none，inside，outside，both）
max_line_length                     # 在指定的字符数后强制换行。off关闭此功能
[*.js]                              # 对所有的 js 文件生效
quote_type = single                 # 字符串使用单引号

[*.{html,less,css,json}]            # 对所有 html, less, css, json 文件生效
quote_type = double                 # 字符串使用双引号

[package.json]                      # 对 package.json 生效
indent_size = 2                     # 使用2个空格缩进

4.使用预处理器sass

需要安装node-sass、sass-loader

安装启动项目后发现报错

咱也不知道是神马原因，经过测试后需要安装

npm rebuild node-sass

就ok了。