每个前端都值得拥有自己的组件库,就像每个夏天都拥有西瓜🍉

⚠️本文为社区首发签约文章,未获授权阻遏转载

大家好,我是洛竹,一只住在杭城的木系码妖‍♀️,假定你喜欢我的文章,能够经过点赞帮我集结灵力⭐️。

洛竹有一个前端组件库朋友小黑webpack作业基本原理最近在面试时webpack是什么被问到怎样规划一个前端组件库。没啥经前端组件库历的小黑答复了业务提取封装成库以及根据 antd 结合业务二次封装。终究小黑被 HR 以灵力不可挂掉了。其实webpack热更新这个问题查询的并不是前端webpack装备组件假大空的webpack面试题概念java环境变量装备,而是有关开发者库房处理、组前端组件化开发件规划、单元查验、继续集成、协作处理等等才能。那么为了赋能小黑完美答复这架构图个问题呢,我挑选带领小黑一步一步制造一个 React Native 组件库。

这是一篇干货比较多的组件库树立实战教程,不只架构需通用java面试题的代码标准、提交标准、文档保护架构图怎样做word、单元查验、GitHub Action 装备的解说,还触及根据 lerna 的多包处理架构、React Nativejava言语 图标库制造、React Native 组件库开java难学吗发调试、按需加载原理及完毕java言语。工程化的思维是通用的,所以无架构师薪酬一月多少论是你用的架构图模板结构是什么webpack热更新,本文都值得一读。

假定电脑前的掘友也对组件库开发感兴趣,不妨先给个点赞,再继续注重洛竹和小黑的组件架构规划库开发之架构图旅。PS:协作库房和组件库文档阅读本文作用更佳喲!

站在 Vant Desi架构师gn 的膀子上

HTTPSwebpack热更新护开发一个组件HTTPS库无疑是需求投入许多时刻和精力架构师需求把握哪些常识的,Flagjava作业训练架构图 立了倒,倒了又立。可谓万事开头难,首架构师要咱们要有自知之明,在没有规划师和业余开发的前端组件标准文档情况webpack热更新下,我挑选了给现有 Ujava言语I Design 完毕 React Native 版其webpack打包原理他方法敞开组件库开发之旅。在调研了 vant、fishd架构图怎样做word-mobile 和 antdhttps域名-mobile 后我挑选了 vant。这是几个库房的现状比照:

组件库 团队 Git架构图huwebpack打包b Star Nphttps域名m 周下载量 保护度
vant 有赞 17.7K 27,789 维高度高,盛行webpack优化前端功用度也搞
antd-mobile Ant Design Team 8.9K前端组件封装思路 31,470 几乎不保护,风闻蚂webpack打包流程蚁内部也不用了
fishd-mojava作业训练班bil架构图e 网易云商前端 29 22 看起来是个 KPIjava言语 项目无疑了

招认了旅程的方向,便是webpack打包给咱们的组件库起一个合适的名字和口号,用前端工程师的办https和http的差异法表述便是 pachttps域名kage.jso前端组件化和模块化nnam架构ewebpack打包原理 desjavjava初学a怎样读cription 字段:

// package.json
{
"name": "vant-react-native",
"description": "Lightweighjavaeet R架构eact Native UI Componenwebpack打包流程ts inspired on Vant"
}

因为咱们的组件库定位是 vant 的 RN 版,参照 lottie-rhttps协议eact-native、hjava面试题ttps认证styled-react-native、前端组件有哪些jpush-react-native 的命名方法咱们将组前端组件库件库命名为 vant-前端组件化开发结构react-native,一起也是期望组件库完毕时能取得 vant 官方的支撑。

根据 Le架构图模板rna 的多包处理架构

Lerna 是一个处理东西,用于处理包括多个软件包(package)的 JavaSwebpack阮一峰cript 项目。由 Lerna 处理的库房咱们一般称之为单体库房(monorepo)。根据架构师 Lerna 的多包处理架构的利益在于:

  • 组件等架构图模板级解耦,独立版别操控,每个组件都有版别记载可追溯
  • 组件独自发布,支撑灰度、版别回滚以及滑润升降级
  • 按需引用,用户设备具体某个组件包,无需装备即可完毕按需加载的作用。
  • 注重点分别,下降大型复杂度、组件之间依托清楚且可操控
  • 单一职责准则,下降开源基友的参webpack最多支撑几个进口加和奉献难度
.
└── packages架构规划
├─架构图怎样做word─ button # @vant-react-native/button
└─前端组件─ icons # @vant-react-native/icon

初始化 lerna 项目

$ mkdijava初学r vant-react-native &前端组件化amp;& lerna inijava怎样读t -webpack打包原架构师证书-independent

yarn works架构是什么意思paces

运用webpack打包流程 yarn workspaces 结合 L架构是什么意思erna useWorkspaces 能够完毕 Lerna Hoisting。这并不是多此一java环境变量装备举,这能够让你在一起的当地(根目录)处理依托,这即节约时刻又节约空间。

装备 lerna.js前端组件标准文档on:

{
...
"npm架构是什么意思Client": "yarn",
"useWorkspaces": true
}

保管给 yarn wrokspace 之后,lerna 的 packages 将会被尖端 packawebpack打包流程ge.jsonworkspaces 掩盖:

{
"private": true,
...
"workspaces": [
"packages/*"
],
}

lerna publish config

假定你不想在悉数 package.json 文件中独自前端组件化和模块化清楚设置你的注册表装备,例如运用私有注前端组件有哪架构工程师册表时,设置 commawebpack热更新nd.publishwebpack打包原理.reg前端组件有哪些istry 很有用。装备 ignoreChanwebpack打包原理gJavwebpack作业基本原理aes 则是为了避免不用要的版别晋级。

"ignowebpack面试题reChanges": [
"ignored-前端组件封装file",
"**/__tests__/**",
"**/*.md"
],
"command": {
"publish": {
"registry": "https://registry.npmjs.org"
}
}

除此之外,假定你的java难学吗包名是带we前端组件cuibpack是什么 scope 的,需求在那个包的 package.jswebpack打包原理onjava初学设置 puwebpack阮一峰blishConfig.access"public"

lernjavascripta version config

当装备 conventionalCommitstru架构图模板e 后,lerna 版别将运用 Cwebpack打包onve前端组件封装ntionajava模拟器l Commits Specificjava言语ation 来招认版别晋级并 生成 CHANGELOG.md 文件。

"command": {
"version": {
"conventionalCommits": true,
"message": "前端组件封装思路chore(release): publi前端组件化开发sh"
}
}

标准化提交

标准化 git commit 关于前进 git log 可读性、可控的webpack热更新版别操控和 changelog 生成都有着重要的作用。洛竹之前在前端组件库 一文搞定标准化javaeeGit Co前端组件封装思路mmit 中具体叙说了 Conventional Commits 的概念以及 commitizen、cz-custo架构mizable、@co架构师薪酬一月多少mmitlint/cli、yorkie架构师 和 commitlint-config-cz 等东西的https域名装备。

因为装备繁琐,我在 @youngjuning/cli 中增加了 init-commit 指令webpack打包原理一键装备 conventional commit。能够翻开这个 commit 查javascript看装备信息。

留神:hujava环境变量配架构图模板sky 高版别用法不向后兼容,我在这个 comm架构师薪酬一月多少it 顶用尤大的 yorkie 替代webpack装备了 husky。

代码标准化

代码标准化的重要性显而易见架构图模板,代码标准化触及的东前端组件封装西有 editorconfig、eslint、prewebpack装备ttier 等,在 装它|再也不用操心ESLint装备 一文中我介绍了怎样一步一步制造归于自己的 eslintHTTPS config 插件并产出了 @youngjuning/webpack打包流程eslint-config 和 @youngjuning/prettier-config。

vant-react-natiWebpackve 暂时运用 @youjava模拟器ngjuning/eslint-config、@youngjuning/prethttps协议tier-config 绑缚项目代码标准。相关装备如下文。

eslint

java难学吗要设备 react-native 所需的插件。

yarn add -D eslin架构图怎样做wordt-架构规划plugin-react 
eslint-plugin-react-hooks 
eslint-plugin-jsx-a前端组件化和模块化11y 
eslint-plug架构in-import 
eslint-前端组件封装思路pl前端组件封装思路ugin-react-n前端组件封装ative

然后java环境变量装备装备 .eslinhtt前端组件化开发ps安全问题trc.js

// .eslintrc.j架构s
m前端组件odule.exports = {
extjava作业训练班ends: ['@youngjuning/esl架构师和程序员的差异int-confi前端组件标准架构师文档webpack是什么g/react-native']
}

prettier

// .prettierrc.js
module.exports = requ架构图模板前端组件库ire('@ywebpack打包流程oungjuning/prett架构规划ier-config');

@youngjwebpack热更新uning/eslint-cjava面试题onfig 计划也用 lerna 处理,产出 @yojava模拟器ungjuning/eslint-conhttps安全问题fig-react、@java言语youngjuning/eslint-config-react-native、@youngjuning/eslint-config-vue 让开发者无架构前端组件化开发过多装备开箱即用。

editorconfi架构图g

# .editorconjavascriptfig
# EditorConfig is awesome: http://Editorhttps安全问题Config.org
# top-m前端组件化开发ost EditorConfig file
ro前端组件有哪些ot = true
# Unix-sty前端组件库le newlinejava难学吗s with a new前端组件cui端组件库line en前端组件标准文档ding every file
[*]
indeWebpacknt_style = space
indent_size = 2
end_of_line = lf
charset = ut架构师薪酬一月多少f-8
trim_trailinwebpack装备g_前端组件库wh前端组件有哪些ite架构师薪酬一月多前端组件化sp架构师ace = true
inser架构图t_final_newline =前端组件化开发结构 true
[*.md]
trim_https域名trajava言语iling_whitespace = false
[webpack优化前端功用*.gradle]
indent_size = 4
[BUCK]
indent_size = 4

yorkie & lint-stagedjavascript

$ yarn add -D yorkie lint-staged
{
"gitHooks": {
"commit-msg": "commitlint -e -V",
"pre-commit": "lint-staged"
},
"lint-staged"webpack前端组件库装备: {
"**/*.{js,jsxhttps协议,ts,tsx}": [
"eslint --fix",
"gijavascriptt架构架构师和程序员的差异工程师 add ."
]
},
}

第一个组件从 Icon 开端

一个老到的组件库都会具有自己的一套 Ico前端https域名组件标准文档n,Icon 一般由规划师经过 Sketch 规划,然后导前端组件库出 svg 文件。前端组件封装

ant-design-icons 的 svg 文件是 保存在本地,然Webpack后经过脚本生成 react 组件、vue 组件 和 icons-rea架构师需求把握哪些常识ct-native 等组件,因为支撑的结构比较完备webpack打包原理咱们无需自架构图怎样做word己结架构图架构怎样做word束,RN 咱们直接运用 icons-react-native。

vant 以及 fishd-mobile 则是通前端组件化开发结构过 Iconfont 保护 svg 文件,然后经过设置 @font-face 的方法结Webpack束 Icon 组件,如图https协议所示:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

有了 ttf 文件,我java环境变量装备们能够java言语像 @ant-design/icons-react-native 相同根据 ttf 文件运用脚本生成 Icon 组件,可是运用 ttf 字体有一个坏处,便是每次更新图标,都要相应的webpack打包流程更新 ttf 文件,然后再次打包发布 APP前端组件化和模块化。并且 ttf 不支撑多种颜前端组件库色的javaee图标,导架构工程师前端组件致悉数图标都是单色。假定你是仰仗 react-native-vector-icons架构师和程序员的webpack阮一峰差异,该库内置了 10 多套 ttf 文件,合起来有 2M 左右;你或许前端组件有哪些用不到它们,可是它们仍然会被打包进你的 APP 里,这也是我认为 react-nativwebpack装备e-elements 这个库外强内弱webpack装备的一大原因。

那么只架构师薪酬一月多少需 Iconfont 链接咱们怎样完毕 vant-前端组件化icons 的前端组件化和模块化 React前端组件标准文档 Native 版别呢?这儿洛竹没有自己写脚本,而是运用了一款叫 react-native-iconfont-cli 的东西,fwh1990 大佬针对以上痛点用纯 Javascrhttps安全问题ipt 完毕 iconfontwebpack打包原理 到 Reajava环境变量装备ct 组件的转化操作,不需求依托 ttf 字体文件,不需求手动下前端组件载图标到本地。

创立 lerjava初学na 子包

# 创立主包,主包用来一起导出全架构师证书部的组架构师需求把握哪些常识
$ lerna creatjava作业训练班e vant-react-native -y
# 创立 icons 包,咱们的第一个组件!
$ lerna create @vant-react前端组件化开发-native/iconjavascripts -y

javascript们的目录webpack最多支撑几个进口结构看起来是这样的:

.
└── packages
├──webpack热更新 icons
│ ├── README.md
│ └── package.json
└── vant-react-native
├── RE架构图前端组件库ADME.webpack装备md
└── package.json

生成 icons

设备插件

yarn wo前端组件化rkspace @架构是什么意思vant-reacwebpack阮一峰t-native/icons add -D react-natiwebpack打包流程ve-svg react-native-iconfont-cli

生成装备架构师需求把握哪些常识文件

咱们在 pack架构规划agejava面试题s/icons 目录下运用 npx iconfont-init架构工程师令会生成 iconfont.json 文件,自定义后内容如下:

{
"sy前端组件化m架构是什么意思bol_url": "https://at.al架构师证书icd架构是什么意思n.com/t/font_2553510_7cdsjava言语497uxwn.js",
"use_typescript": fals架构图模板e,
"save_dir": "./lib",
"trim_架构师和程序员的差异icon_prefix": "van-icon",
"defawebpack装备ult_icon_size": 18
}

生成 React Native 标javaee准组件

实施 npx icohttps协议nfont-rn前端java初学组件令即可生成标准 Rwebpack作业基本原理eact Native 组件。因为图标文件比较多,咱们不将前端组件标准文档图标产品参与 git 处理。所以咱们需求在 npm 发布前实施构建指令架构师需求把握哪些常识

{
"build": "npx iconfon架构t-rn架构图怎样做word",
"phttps认证rep前端组件化和模块化ublishOnly": "yarn buiwebpack面试题ld"
}

装备 r前端组件有哪些eact-native-vant

咱们前j架构师和程序员的差异ava言语面说到 packa架构工程师ges/vant-react-natiwebpack打包原理ve 是主包的目录webpack最多支撑几个进口,咱们需求将 @vant-react-native/icohttps和http的差异ns 包增加到主包的依托中并导出。

增加依托

$ lerna add @vant-react-HTTPSnative/icons --scope vant-react-native

导出java初学 Icon 组件

//前端组件库 pjavaeeackagesjava作业训练班/vant-react-nat架构ive/src/index.ts
exp架构图怎样做javascriptwordort { default as Icon } from '@vant-react-native/icons';
export * from '@v前端组件化ant-react-native/icons';

tsconfig 装备

对与每个子包咱们期望运用相同的装备,所以咱们会先在整个项目的根目录新建 tsconfig. base.json,在子包继承即可。

{
"extends": "../../tsconfig.base.j架构师需求把握哪些常识son",
"compilerOption架构图模板s": {
"outDir": "lib",
},
"include"webpack阮一峰: ["src/https安全问题**/*"]
}

装备发布脚本

@vant-react-native/icons 子包相同webpack作业基本原理,咱们需求添架构图buildprepublishOnly 脚本:

{
"build": "tsc",
"prepublishOnly": "yarn build"javascript
}

发布包

第一次发布的话,留神运用的是 le前端组件化和模块化java难学吗rna publish 0.0.1前端组件封装因为 lerna 的发布Webpack指令没有第一次发布这个参数,所以需求闪现指定初始版别。或许能够将初始版别设置为 0.https安全问题0.0 然后实施 lerna publish

小技巧:假定架构规划发布后想检查包内容,能够经过 jsdelivr 检查。比方刚发布的 vant-reactWebpack-native 和 @vant-react-native/icons

开发调试

一个完善且体https协议会杰出的调试流程不只能够满意在开发阶段验证组件是否契https域名合预期,还能够下降开源社区基友的参与难度。React Native 组件库的调试和其他技术栈流程大体没有差异,只不过因为 Metro 不支撑软联接webpack优化前端功用 以及 vantjava言语-react-native 是根据 lerna 的单体webpack打包原理库房项目,咱们的装备会有不同。

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

初始化 React Native App

由所以 React Native 项目,咱们需求初始前端组件化webpack热更新开发化一个 React Native 项https域名目。首要找一个当地运用 react-native inwebpack打包流程it vantapp --template react-native-template-typ架构师薪酬一月多少escript 创立一个新的 React Native ApJavap。然后将生成的 App 与咱们的主项目吞并。吞并后的项目结构如下:

.
├── App.tsx
├── _前端组件有前端组件有哪些哪些java作业训练班_tests__
│   └── App-test.tsx
├── androijava初学d
│   ├── app
│   ├── builhttwebpack最多支撑几个进口ps和http的差异d.gradle
│   ├── gr架构师和程序员的差异adle
│   ├── gradle.propwebpack热更新erties
│   ├── grjava作业训练班adlew
│   ├── gradlew.bat
│   └── s前端组件cuiettings.gradle
├── app.json
├── babel.confiWebpackg.js
├── commitlint.config.js
├── ind前端组件封装思路ex.js
├── ios
│   ├── P前端组件化和模块化odfile
│   ├java言语── Podfile.lock
│   ├── Pods
│   ├── vaWebpackn前端组件有哪些tapp
│   ├── vantapp.xcodeproj
│   ├前端组件封装── vantappwebpack面试题.xcworkspacejava面试题
│   └── vantappTests
├── lerna.jwebpack是什么son
├── metrohttps和http的差异.config.js
├─https协议─ package.json
├── packagewebpack热更新s
│   ├─java面试题─ icjavaeeonsjava难学吗
│   └── vant-reacwebpack打包原HTTPSt-nativejavaee
├── tscjava言语onfig.base.json
├── tsconfig.json
└── yarn.lock

首要冲突的是 Pr架构图ettierjava怎样读、eslint 等东西的装备,吞并没那么架构师和程序员的差异难。在作业项目之架构图怎样做word前,咱们一https安全问题般需求编译项目。我webpack最多支撑几个进口们能够仰仗 lerna run build 指令批量作业子包里的 builwebpack最多支撑几个进口d npm前端组件化 script。

留神:因为子包之间有依托联络,不要运用 --webpack装备parallel 参数并行实施打包脚javaee本。

现在咱们编写一个九宫格 Demo架构 验证一下https和http的差异

// App.tsx
impjava面试题ort React, { Componwebpack打包流程ent } from 'reactwebpack阮一峰';
import { View, Text, SafeAreaView, Scrollwebpack打包流程View } from 'react-native';
import { Icon } from 'vant-react-nat前端组件化ive';
// 咱们也能够只设备 @vant-架构工程师react-native/icons 包
// impo架构师证书rt { VanIconAddWebpack } from '@vant-react-native/icjava面试题on前端组件化开发结构s'
type Icojava模拟器nNameType = React.Compwebpack是什么onentProps&架构师lt;HTTPStypeof Icon&gjava言语t;['name'];
export default class App extends Component {
renderjava言语() {HTTPS
retjava怎样读urnwebpack打包原理 (
&lt前端组件cui;SafeAreaView&架构师需求把握哪些常识gt;
<ScrollView>
<Text
style={{ textAlign: 'center', paddingVertical: 20, fontSize: 25, color: '#007fff' }}
>
v架构是什么意思ant-rhttps认证eact-native
</Text&架构图怎java环境变量装备样做wojavascriptrdgt;
<V架构是什么意思iew style={{ flexWrap:java作业训练班 'wrap', flexDirection: 'row' }}>
{data.map((item, index) => {
const lastLineLength = dawebpack优化前webpack装备端功用ta.length % 4 || 4;
return (
<View
key={item}
styl架构师薪酬一月多少e={{
width: '25%',
marginBottom: index < data.length - lastLineLength ? 40 : 0,
alignItems: 'center',
}}
>
<Iconhttps和http的差异 name={item}https安全问题 size={40}java作业训练班 />
<Text style={{ color: '#6架构是什么意思46566', marginTop: 10 }}>{item}</Textwebpack作业基本原理>前端组件封装
</View>
);
})}
</View>
</ScrollView>
</SafeAr架构图怎样做wordeaView>
);
}
}
const data: IconN前端组件标准文档ameTyp前端组件化开发结构e[] = ['location-o', 'like-o',架构图前端组件库模板 'star-o', 'phone-o', 'setting-o', 'fire-o', 'cHTTPSoupon-前端组件cuio', 'ca架构图怎样做wordrt-o', 'shopping-ca前端组件封装rt-o', 'cart-circle-ohttps域名', 'friends-o', 'comment-o', 'gem-o', 'gift-o'java初学, 'p架构师和程序员的差异oint-gift-o', 'send-gift-o', 'service-o', 'bag-o', 'todo-list-o', 'balance-listWebpack-o', 'close'java言语, 'clwebpack热更新ock-o', 'questiojava难学吗n-o', 'passhttps认证ed'];

然后实施 yarwebpack最多支撑几个进口n ios 检查实践作用(之后咱们就可webpack最多支撑几个进口以实施 yarn start --res架构师需求把握哪些常识et-cache前端组件封装思路速开端调试):

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

上面的示例代码中咱们能够看到咱们直接运用了 import { Icon } from 'vant-re前端组件cuiact-native'; 而不是相对途径引用 packages 下的模块。可是咱们的项目并没与设备这个依架构师和程https安全问题序员的差异托,编译器是怎样找到的呢?这儿javaee也没有什么银弹,这是因为 lerna 会把子包软链接到 nowebpack阮一峰de_modules 中,咱们能够运用 ls -al 发现看到包的实践指向:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

咱们也能够在类型提示中看到实践指架构图怎样做word向的是 packages 下的文件:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

留神:Metro 不Java支撑符号链接 指架构图的是软联接的目录不在项目根目录下,这儿咱们软联接指向的方位还在根目录下,所以能够正确作业✅。这个特性确保了调试与出产开发的一起性和便利性。

实时编译

现在咱们的调试流程是:

  1. 批改代码
  2. 实施 lerna ruwebpack装备n build 编译每个子包
  3. 实施 yarn ios 调试项目
  4. 批改代码
  5. 实施 lerna run build 从头编译
  6. 实施 y前端组件化arn start --reset-java初学cach前端组件库e 作业项目
  7. 循环 4、5、6。

前端组件封装javaee前端组件然 React Natihttps安全问题ve 有 Fast Refresh 功用,可是由https域名于咱们的代码是需求编译的,所以咱们需求重复编译https协议作业的动作。

任何重复的作业都能够用脚本替代。首要咱们需求给每个子包增加实时编译的 scjava环境变量装备ri架构师需求把握哪些常识pt,像 rollup、babel、webpa架构工程师ck、typescript 都架构工程师有参数能够完毕实时编译:

{
"sjava难学吗cripts": {
"dhttps认证ev": "tsc -javascriptw",
"build"https和http的差异: "tsc",
"prepublishOnly架构工程师": "yarn build"
},架构图
}

而咱们的 @vant-react-nativwebpack打架构图模板包原理e/icons 包运用的 n架构师证书px iconhttps认证font 没有实时编译选项,经过调研,https域名我引入了 onchange 这个库前端组件封装思路能够根据 g前端组件cuilob 方法监听文件改动后实施一个指令:

{
"scripts": {
"dev": "o架构nchange -i 'iconfont.json' -- yarn bwebpack面试题uild",
}
}

然后咱们需求运用 leJa架构师varna run dev --parallel 批量实施实时编译脚本,这儿加 --parallel 是因为子包假定是实时编译,进程会卡住。为了弥补架构规划,咱们不得不预先编译 @vant-r前端组件化和模块化eact-native/iconsjava模拟器,然后因为相同的原因我引入了 npm-run-all 来并前端组件标准文档行实施 lerna run devreact-native start,无缺脚本如下:

{
"predev": "lernjava模拟器a run build --scope @vant-javaeereact-native/icons",
"架构工程师dev": "lerna run dev --parallel",
"start": "react-native s架构师薪酬一月多少tart",
"debug": "run-p dev start",
}

按需加载

小黑:“架构图模板洛竹哥哥,我之前为了运用架构图模板 react-native-elements 的其间几个组件架构图怎样做word而引入了整个javascript组件库。因为这个组件库依托了 react-natwebpack作业基本原理ive-vector-icons 导致 bundle 包变大。假定我便是想用整套 vant-webpack装备react-native,怎webpack是什么样处理这个问题呢?”

众所周知,React架构图 Native 的打包东西 Metro 不支撑 tree-sh架构师和程序员的差异aking。处理这个问题的方法其实很简https和http的差异略,机https和http的差异Java敏的你或许知道协作 babel-plugin-import 是可hhttps协议ttps和http的差异以完毕按需加载的需求的。但因为咱们是多包处理架构,需求针对多包的架构规划一个计划。

reactjava难学吗-naitve bundle 包

为了比对优化前端组件化开发前后包大小,咱们需求运用 react-n架构ative bundle 指令看一下纯 JS 包前端组件有哪些的大小,咱们来简java怎样读略看下这个指令:

react-native bundle --platform ios --entry-file in架构dex.js -架构师薪酬一月多少-bundlewebpack打包原理-output ./bund架构le/ios/inhttps协议dex.ios.jsbundle --asWebpacksets-dest ./bundle/ios --dev false --reset-cache
  • --entry:进前端组件库口 js 文件
  • --bundle-output:生成的 b前端组件封装思路undle 文件途径
  • --platform:途径
  • --as架构图se架构图ts-dest:图片资源的输出目录
  • --dev:是否为开发版别,打正式版的设备包时咱们将其赋值为 false
  • --r架构规划eset-cache:重置缓存,避免打包运用旧的缓存

按需加载原理

前面咱们说到 packages/vant-react-nwebpack打包流程ative 只需一个文件 src/index.ts 用来导出悉数子包,现在咱们增加一个新的包 Button,看上前端组件去便是这样:

exphttps和http的差异ort {javascript default as Icon } fr架构师和程序员的差异om '@vant-re架构师需求把握哪些常识act-native/icons';
exp架构图模板ort * from '@vanjava言语t-react-native/icowebpack最多支撑几个进口ns';
export { default as Bhttps域名ujavaeetton } from '@vanwebpack阮一峰t-react-native/icons';

这种导出方法,用户只能经过 impo前端组件化开发rt Button from '@vant-react-native/butt架构是什么意思on'HTTPS;import Button from 'vant-react-natjavaeeive架构图模板/javaeelib/前端组件化开发结构button'; 的方法手动完毕按需加载,这不只不方便开发架构师证书者运用,从打包产品来说也增加了许多字节。那么问题来了java怎样读,怎样样的安排方法才华满意按需加载呢?答案就在 babel-plugin-iwebpack打包mport 插件的文档中:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

从图中咱们看出 babe架构师需求把握哪些常识l-plugin-webpack打包import 插件是https认证在编译阶段将引用指向了模块地址文件夹webpack装备webpack是什么。用户运用时设备插件并做如Webpack下装备就完毕了按需加载。

"plugins": [
["import", { libraryName: "antd", style: true }]
]

仍然没有银弹,插件做的作业仅仅替代了你HTTPShttps协议右手。知道前端组件化开发结构了原理咱们就可前端组件cui以依照文档要求的格式从头安排咱们的 vant-react-native 包:

.
├── CHANGELOG前端组件有哪些.md
├── lib                    # 上传到 NPM 的编译产品 
│   ├── button             # 符合 babel-pluginjava作业训练班-import 的默许装备要求
│   │   ├─java作业训练班─ index.d.ts
│   │   └── indwebpack打包原理ex.js
│   ├── ico前端组件标准文档n
│   │   ├── index.d.ts
│   │   └── index.js
│   ├── index.d.ts
│   └── index.js          # export * frojava初学m '架构师需求把握哪些常识./button'webpack阮一峰;
├── package.json
├── src                   # 源码目录
│   ├── button
│   │   └─架构─ index.ts
│   ├── ic架构师o前端组件库n
│   │   └── index.ts
│   └── index.ts
└── tscjava环境变量装备onfig.json         # 编译装备,前端组件有哪些将 ts 文件编译到 lib 文java环境变量装备件夹下

va前端组件cuin架构图怎样做wordt-react-native/src/button/index.ts:

impowebpack打包原理rt Button from '@vanjavascriptt-re前端组件cuiact-native/button';
export defaultwebpack阮一峰 Button;
export { Bu前端组件封装tton };

vant-react-native/src/icon/java模拟器index.ts:

import Ic前端组件cuiojava环境变量装备n from '@vant-reawebpack面试题ct-native/icons';
export default Icon;
export { Icon };
export * from '@vant-react-native/java环境变量装备icons';

vant-react-native/src/indjava环境变前端组件有哪些量装备ex.ts:

export * from './icon';
e前端组件化开发xporjava初学t * from './button';

然后项目中批改 babel.config.js:

module.exports = {
presets:HTTPS ['module:metro-react-native-bab前端组件el-preset'],
plugins: [
["import", {librar架构师需求把握哪些常识yName: 'vant-https域名reac前端组件标准文档t-native'}]
],
};

编写 Babel 插件?

尽管经过批改主包的java面试题导出方法能够完毕需求,可是却极大地增加了项目Java自身的复杂度。前面咱们现已知道 babel-plugin-import 的原理是转化引用途径。那么咱们是不是能够webpack是什么经过插件动态把 import {Button} from 'vant-react-nhttps认证ative' 转成 import Button from '@vant-react-native/buttonwebpack阮一峰' 呢?答案是必定webpack阮一峰的,下面是我根据 babel-plugin-import 的 customNamehttps域名备编写了架构师一套装备并封装在 babel-plugin-import-vant 包中:

im架构port camelC架构ase from 'camelcase';
expor架构师t default (): any[] => [
[前端组件化开发结构
'import',
{
libraryName: 'vant-reachttps认证t-native',
customName: (name: string) => {
if (namjava面试题e === 'icon') {
return '@vant-react-native/icons';架构工程师
}
if (name.match(/^van-前端java怎样读组件cuiicon-/)) {
returnhttps协议架构图怎样做word `@vant-reac架构师t-native/ihttps协议cons/lib/${camelCase架构师薪酬一月多少(name, { pascalCase: true })}`;webpack阮一峰
}
return `@vant-react-na前端组件化开发结构tive/${name}`;
},
},
'vant-reactwebpack打包原理-native',
],
[javascript
'import',
{
libraryName: '@前端组件cuivant-react-nati前端组件化开发ve/icons',
customName: (name: string) => {
returnwebpack最多支撑几个进口 `@vant-react-native/icons/lib/${camelCase(name, { pascalCase: true })}`;
},
},
'@架构师需求把握哪些常识vant-reajavajava面试题面试题ct-native/ichttps协议ons',java言语
],
];

在项目的 babel.cHTTPSonfig.js 装备中增加 plugins: [...require('babel-plugin前端组件封装思路-import-vant').defhttps安全问题ault()] 即可完毕按需加载。

还有能够优化的当地吗?机警的你或许又发现我仅仅经过函数导出了一个装备而已,并不架构师是真实的插件,所以未来我会定制一个 vant-react-native 自己的按需加载 babel 插件。

name.matchjavaee(/^van-i前端组件封装思路con-/) 这个判别条件是因为 @vant-react-njava难学吗ative/icons 包除了包括一个默许导出的 Icon 组件,还导出了许多单个图标组件,为了进一步减小java模拟器打包体积,咱们对这前端组件化开发个子包也进行了按需加载处理。

咱们现HTTPS已知道按需加载的原理是没有中间商赚差价直接和卖家谈,所以后边咱们遇见相似的需求经过转化回来卖家地址即可。不需求损坏性地改项目结构。

作用展现

初始包大小 未装备按需加载(引入 Button) 按需加载(引入 Button) 按需加载(引入 Icon) 按需加载(引入 VanIconAd架构师dhttps认证
723KB 1.8M 725前端组件化开发KB 1.webpack打包流程8M 1.22M

之所以 Ico架构师证书n 包会大,是因为 react-native-svg 这个库大,所以不主java初学java怎样读张直接运用 Icon 组件,而是运webpack是什么用 VanIconAdJawebpack最多支撑几个进口vad、VanIwebpack优化前端功用conEye 这种独自的图HTTPS标组件,少了 593KB 仍是挺香的。

组件库文档

组件库文档比较重要的是有能够交互的 Demjava初学o 演示,我是 Dumi 的资深用户,仰仗 dumi-them前端组件化开发e-mobile 和 umi-plugin-react-native 咱们能够很好地满意 React Native 组件库文webpack装备档的树立。

集成 Dumi 到项目中

设备依托:

$ y前端组件化和模块化arn add dumijava模拟器 dumi-theme-mobile umi-plugin-reacjava言语t-natijavascriptve -D

装备文件:

在项目根目录增加 .umirc.ts

import { defwebpack打包原理ineConfig, IConfig } from 'd前端组件有哪些umi';
export default defineConfig({
title: 'vant-reawebpack打包ct-native',
mode: 's前端组件化ite'前端组件标准文档,
logo: 'https://img01.yzwebpack是什么cdn.cwebpack打包n/vant/logo.png',
favicon: 'https://img01.ywebpack打包流程zcdn.cn/vant/logo.png',
resolve: {
includes: ['docs', 'packages/bu架构https安全问题规划tton', 'packa架构师需求把握哪些常识ges/icons'],
},
// morwebpack作业基本原理e config: httpjava言语s://d.javajava初学初学umijs.org前端组件化开发结构/confjavaeeig
} as IConfigjavascript);

值得一webpack打包原前端组件封装思路提的是,Dumi 是支撑 Lewebpack打包原理前端组件化和模块化rna 库房的,它默许会以 packagjava怎样读es/[包名]/src 为根https协议底途径查找悉数子包的 Markdown 文档并生成路由。通架构师rehttps协议solve.includes 能够装备 dumi架构是什么意思 嗅探的文档目录,dumi 会查验在装备的目录中递归寻觅 markdown 文件。

增加 NPM 脚本:

留神:因为实践依托的是架构规划 packages 下的包,咱们必须先编译悉数的包,不然安排的时分会报 This depe架构师薪酬一月多少ndency wjava怎样读as not found: 的差错。

{
"scripts":webpack打包流程 {
"start:dumi": "dumhttps协议i dev",
"build:dumi": "lerna run build && dumi build"
}
}

忽略文件(.gitignore):

# umi
.架构图怎样做wordumi
.umi-produHTTPSction
.ewebpack阮一峰nv.local
dist/

安排到 GitHub Pages

在根目录新建 .github/workflows/gh-pageshttps和http的差异

n架构图怎样做wordame: gi前端组件标准文档thub pages
on:
push:
branches:
- mai前端组件标准文档n # dehttps安全问题faultwebpack最多支撑几个进口 branch
jobs:
deploy:
runs-on: ubWebpjava怎样读ackuntu-18.04
steps:
- uses: actions/checkout@java模拟器v2
- run: yarn instalhttps协议l
- run: yarn build:dumi
- name: D前端组件库架构工程师eploy
uses: peaceiris/actions-gh-pages@v3
with:
github_towebpack面试题ken: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist

预览

现在咱们能够拜访 youngjun前端组件化ing.jhttps协议s.o架构图怎样做w前端组件库ordrg/vant-reacJavat-… 检查效javaee果了:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

装备优化

现在根据 dumi 的文档站点java环境变量装备仅仅初始化,许多装备(.umirc.ts)webpack面试题能够优化,比方:

  1. 根据 jsdel架构师和程序员的差异iver 装备 CDN 加快架构师薪酬一月多少
const isProd = process.架构师env.NODE_ENV === 'production';
.wewebpack阮一峰bpack打包原理.前端组件cui.
publicPathjava难学吗: isProd ? 'https://cdn.jsdelivr.net/gh/youngjava怎样读juning/vant-架构图怎样做wordreact-native前端组件化开发@gh-pages/': '/',
  1. 增量发布和避免浏览器加载缓存
{
hash: true
}
  1. 前端组件化开发结构盟网站核算
{webpack打包原理
scripts: [java作业训练班'https://s9.cnzz.com/z_stat.php?id=1280093214&web_id=1280093214'],
style前端组件封装s: ['a[title=站长核算] { display: none; }'],
}
  1. 装备 exportStatic: {} 将悉数路由输出为 HTML 目录结构,避免刷新页面时 404。

Pull Request 预发预览HTTPS

考虑到后期webpack架构师和程序员的差异作业基本原理社区会奉献代码和文档。在 pr 合进主分支之前,咱们需求预览文档或组件。满意前端组件cui这一需求的是一个叫 surge.sh架构图 的静态前端组件化保管服务,surge 支java作业训练班撑在指令javaee行经过架构师和程序员的差异简略的指令免费发布 HTML前端组件、CSS 和 JS 文件到 web。

恳求 Surge Tok架构师薪酬一月多少en

设备 surge cli:

npm install --global surge

注册 surge 账号:

suerge login

获取 token:

suerge token

装备 CI

因为 GitHub 的安全问题,javascriptsurge-preview Action 插件无法运用,咱们参看 dumi 官方的装备自定HTTPwebpack热更新S义了 CI,首要咱们复制下图中的三个文件到项目中webpack打包前端组件化开发结构

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

然后批改 previ架构是什么意思ew-build.yml 中的 buiwebpack阮一峰ld step

- NODE_OPTIONS='java模拟器--max-java言语old-space-size=4096' yajava初学rn build
+ NODE_OPTIONS='--max-old-space-size=4096' PREVIEWJava_PR=true yarn buil架构是什么意思d:dumi

增加环境变量 PREVIEW_PR=true 是为了让 dumi 打包时识别出不是出产环境打包,.umirc.ts 需求相应修前端组件cui正为:

cons架构图t isProwebpack是什么d =
procesWebpacks.env.NODE_ENV =https认证== 'prwebpack作业基本原理oductijava怎样读on' &ajava面试题mp;& processwebpack打包流程.env.PREVIEW_PR !== "true";
...
publicPath: isPr架构是什么意思od ? 'https架构图://cdn.jsdelivr.net/webpack是什么gh/youngju架构规划ning/vant-react-native@gh-pa前端组件化ges/': '/',
...

再然后webpack打包流程,批改 preview-架构deploy.yml 文件中的安java怎样读顿域名 dumi-previewvan架构师需求把握哪些常识t-react-native-preview

终究咱们把前面获取的 Surg架构师和程序员的差异e Token 增加到库房的 Secrets 即可。

作用展现

正在安排 PR 预览https和http的差异情况:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

安排成功情况:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

拜访 vant-react-native-preview-pr-1.surge.sh/ 即可验证文档的正确性✅。

单元查验

我在 运用webpack热更新 Jest 和 Enzyme 进行 React Native 单元查验|技术点评 一文中曾提交单元查前端组件有哪些验和文档前端组件库相同,是确保程序最小单元前端组件化开发结构质量的重要一环。固然一个老到的组件库是必定有单元查验Wejava言语bpack的身影。本章架构师就不展开讲单元查架构师验了,首要讲 v前端组件封装思路ant-react-nativ前端组件封装思路e 是怎样装备单元查验的。

设备依托

jest、babel-jewebpack最多支撑几个进口st、@types/jest 这些依托都现已设备了,咱们需求设备的是 enzyme 这个根据 jest 的单元查验结构。

$ yarn add enzyme jest-enzyme enzyme-adapter-rwebpack面试题eact-16 enzyme-to-json @types/enzyme react-native-mock-renwebpack装备der -DW

Enzwebpack是什么yme 是用于 React 的 JavaScript 查验实用程序,能够更轻松地查验 React 组件的输webpack热更新出。您还能够根据给定的输出进行操作https和http的差异,遍历并以某种方法仿照架构图作业时webpack阮一峰

装备

jest.con架构师薪酬一月多少fjava难学吗ig.js:

module.export架构是什么意思s = {
preset: 'rehttps域名act-native',
v前端组件封装erbose: truewebpack热更新,
collectCoverage: trWebpackue, // 生成查验掩盖率报告
moduleNameMapper: {
// fjava难学吗or https://gitwebpack面试题hub.co架构Java工程师m/facebook/jest/issues/919
'^image![a-zA-Z0-9$_-]+$': 'GlobalImageStu前端组件化开发b',
'^[@./a-zA-Z0-9$_-]+.(png|gif)$架构图模板': 'RelativeImageStub',
},
setupFilesAfterEnv: ['<Jav前端组件cuiarootDir>/jest.setup.js'], //https和http的差异 运用 Jest 作业设备文件以装备 En架构师需求把握哪些常识zyme 和适配器(如下文jest.setup.js中所示),之前是setupTestFrameworkScriptFile,也能够运用setupFiles
snapshotSeria架构图怎样做wordlizers: ['enzyme-to-json/ser架构图模板webpack打包流程ialhttps认证izer'], /架构规划/ 引荐运用序列化程序运用 enzyme-to-json,它的设备和运用十分简略,并容许您编写简练的快照查验。
};

jest.setup.js:

import 'react-na前端组件化tive';
import Enzyme from 'enzyme';
imjava难学吗port Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

一个简略的示例:

// pack前端组件封装思路https和http的差异ages/架构图怎样做wordbuttoJavan/__test__/index.tsx
import React from '架构工程师react'java作业训练班;
import { shallow } from 'enzyme';
import Button from '../src/iwebpack装备ndex';
functHTTPSion setup(props = {webpack最多支撑几个进口}) {
const wrapper = sha前端组件有哪些llow(<Button />);
const instance = wjavascriptraphttps认证per.instance();
return { wrapper, instance };
}
d前端组件化escribe(前端组件化开发'Button Component', () => {
it('render前端组件s correct前端组件cuily', () => {
const { wrapper } = setup();
expect(wrapper).to架构Matchttps安全问题hSnapshot();
});
});

实施 jest 指令java难学吗后能够检查掩盖率如下:

每个前端都值得具有自己的组件库,就像每个夏天都具有西瓜

写给勇士

能写长文的不算勇士,能坚架构图怎样做word持看到这儿的才是勇士。洛竹在此感谢您的阅读。可是组件库工webpack最多支撑几个进口程化这仅仅一个起点,假定本文反响好,组件库具体组件webpack最多支撑几个进口的规划完毕、无缺的 R架构师和程序员的差异eact Native 单元查验教程等等洛竹会在后续whttps协议ebpack面试题的文章中展开讲前端组件

引荐https域名的 UI 库

当然了,vant-react-native 并不是你https认证仅有的挑选,下面的几个 UI 库都是很优异的项目。在完毕 vawebpack是什么nt-react-native 时我也多少学习了前人优异的规划。

  • antdjava面java作业训练班试题-mobile-rn
  • react-native-elementjavascripts
  • react-native-ui-kijava作业训练班tten
  • r前端组件化eact-native-ui-lib

发表评论

提供最优质的资源集合

立即查看 了解详情