react 中引入 ant-design


  ant-design 的引入有兩種方式:

    方式一: import  DatePicker from 'antd/es/date-picker'   // 加載js

         import  'ant/es/date-picker/style/css'   // 加載  css

    方式二: import { DatePicker } from 'antd'

  通過方式二引入 ant-design 的組件,樣式可以通過方式一的方式引入,也可以通過配置 loader 或者 .babelrc 文件來處理,這樣兩種方式的效果其實是一樣的;

  loader 中

                     {
				test: /\.js|.jsx$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			}, 

  .babelrc 中如下配置。其中 presets 是對 es6 的解析配置

{
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "browsers": [
                "> 1%",
                "last 5 versions",
                "ie >= 8"
              ]
            }
          }
        ],
        "@babel/preset-react"
      ],
	  {
		  "plugins": [
			["import", {
			  "libraryName": "antd",
			  "libraryDirectory": "es",
			  "style": "css" // `style: true` 會加載 less 文件
			}]
		  ]
		}
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM