Cómo utilizar la biblioteca de componentes de diseño ant de Ant Financial con reacción nativa, paquete web y es6

1. Preparación:

npm instale los siguientes componentes

a. Instale reaccionar/antd:

npm instale reaccionar reaccionar-dom. antd --save

b. Instalar webpack/less:

npm instalar webpack less --save-dev

Elija usar -g para instalar webpack como necesario

c. Instalar babel-loader y otros paquetes relacionados:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

d. Elija instalar style-loader/css-loader

npm install style-loader css-loader --save-dev

2. config.js

Para una configuración específica, puede ver los ejemplos proporcionados por webpack. Se basa principalmente en babel-loader

babel-loader también tiene ejemplos de cómo webpack.config.js. debe escribirse Portal: babel-loader

3. Escriba nuestro archivo (por ejemplo: demo-antd.jsx)

Utilice únicamente el componente Button proporcionado por antd. Solo se utiliza el componente Botón proporcionado por antd.

ps: Comparación

importar {Botón} desde 'antd'

e

importar Botón desde 'antd/lib/button; ';

Este último no introducirá todo el contenido en antd. Si solo necesita un componente como Button, se recomienda utilizar el último método.

4. Ejecute el paquete web

demo-antd.jsx demo-antd-bundle.js

El archivo demo-antd-bundle.js se generará

5. Introduce el archivo del paquete (demo-antd-bundle.js) en la página

Después de ejecutar este paso, deberías poder ver un estilo nativo cuando ver la página en el elemento del botón del navegador, porque antd no escribe el estilo en el archivo js usando el estilo en línea.

Aquí dejamos de lado la pregunta uno por ahora y analizamos la pregunta dos: el mecanismo interno de la biblioteca de componentes.

Debido a que no he investigado profundamente el código fuente de antd, no puedo explicar en detalle parte de la escritura del código de antd... En otras palabras, la pregunta es "¿por qué el código está escrito así ", si está interesado, puede consultar el código fuente. Como dijo @chenjihao, es más cómodo verificar el código en github que el código descargado de npm.