二次封装antd-mobile组件库

Posted 2023-04-30

参考技术A 项目使用了typescript + less + react + antd-mobile 开发。

开发过程中进行了三种方式的尝试：webpack+rollup+tsc
1.rm -rf dist && tsc -p tsconfig.json && lessc src/index.less ./dist/index.css
2.rm -rf dist && webpack --mode production
3.rollup -wc

tsc+less：
效果：打包ts，less需要手动整合，不能按需加载
webpack:
效果：打包ts，会把webpack的东西打包进项目里，打包时间长

rollup 效果最好，最简单

microbundle-crl 这是一个封装好的配置rollup打包组件库的插件
package.json 配置 "build": "microbundle-crl --no-compress --format modern" 打包成 es6

react-native使用蚂蚁金服的antd-mobile组件库教程

国际惯例，先来展示下这个强大的组建库，常用的大部分组建都可以找到

9A99D507-9505-478F-956C-8F243CFECAF5.png

 

 

 

https://mobile.ant.design 这是组件库网站 阿里旗下的

https://github.com/ant-design/ant-design-mobile 这是github网址，里面有源码，源码里面有使用案例，还有iOS和Android的apk安装包，扫一扫二维码就可以下载安装到手机。

安装步骤

1.

 npm install react-dom --save

2.

npm install antd-mobile --save

3.

npm install babel-plugin-import --save-dev

4.在你的项目目录下找到。.babelrc 文件，把括号里面的内容( "plugins": [["import", { "libraryName": "antd-mobile" }]],)配置好

{
  "plugins": [["import", { "libraryName": "antd-mobile" }]],
  "presets": ["react-native"]
}

使用步骤
1.引入

import { Button } from ‘antd-mobile‘;

2.使用

render() {
    return <Button>Start</Button>;
  }

连环转:http://blog.csdn.net/sinat_17775997