前言
antd-without-babel 是针对 babel 处理器存在的弊端，为 react 项目提供了一种快速，轻便的开发方式。
什么是 antd-without-babel
antd-without-babel 是 ant-design 前端 UI 库的一个 npm 包，可以帮助开发者快速搭建基于 ant-design 的 react 项目，同时避免使用 babel 处理器带来的性能问题和开发效率低下问题。
安装 antd-without-babel
使用 npm 安装 antd-without-babel：
npm install antd-without-babel
使用 antd-without-babel
导入 antd-without-babel
将 antd-without-babel 导入到你的 react 项目中：
import React from 'react'; import ReactDOM from 'react-dom'; import 'antd-without-babel/dist/antd-without-babel.css';
使用 antd-without-babel 的组件
antd-without-babel 的组件使用方式同 ant-design，例如：
import { Button } from 'antd-without-babel';
ReactDOM.render(<Button type="primary">Click me!</Button>, mountNode);配置 Webpack
antd-without-babel 在 react 项目中需要通过 webpack 进行配置，具体可以参考以下示例：
-- -------------------- ---- -------
------- -
------ -
-
----- --------------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
--
-
----- ---------
---- ---------------- -------------
-
-
-根据 antd-without-babel 的安装文档，您的 babel-loader 版本需要为 7.0.0 及以下。
使用示例
下面是一个简单的示例，展示了如何使用 antd-without-babel 搭建基于 ant-design 的 react 应用：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------------------------------------------------
------ - ------ - ---- ---------------------
----- --- - -- -- -
------ -
-----
------- -------------------- ------------
------- ------------------- -- -------------
------
--
--
-------------------- --- ---------------------------------结语
使用 antd-without-babel 可以为 react 项目提供更快速，更轻便的开发方式，同时无需担忧 babel 处理器带来的性能问题和开发效率低下问题。如果您正在使用 ant-design 并且关注着项目性能和开发效率，请尝试使用 antd-without-babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd981e8991b448e580f