Open worldzhao opened 3 years ago
请问是否遇到过这个问题: 我有一个组件库 A
编译成 esm
,内部依赖 react
,使用 vite
打包但是排除(external) react
包。 构建产物后使用 pnpm link --global
链接到全局供 B(跟A不在同一个工作区,可以简单认为是其他磁盘)使用(pnpm link --global A)。 发现 A产物编译的 import React from 'react'
引入的并不是 B项目 nodemodule
的 react
。而是A组件库中nodemodule
的 react
请问是否遇到过这个问题: 我有一个组件库
A
编译成esm
,内部依赖react
,使用vite
打包但是排除(external)react
包。 构建产物后使用pnpm link --global
链接到全局供 B(跟A不在同一个工作区,可以简单认为是其他磁盘)使用(pnpm link --global A)。 发现 A产物编译的import React from 'react'
引入的并不是 B项目nodemodule
的react
。而是A组件库中nodemodule
的react
因为你 A 里的文件 react 指向的就是他自己的 node_modules,monorepo 里会更明显,解决方案,在 B 里用 alias 固定 react 指向 B node_modules 里的 react
请问是否遇到过这个问题: 我有一个组件库
A
编译成esm
,内部依赖react
,使用vite
打包但是排除(external)react
包。 构建产物后使用pnpm link --global
链接到全局供 B(跟A不在同一个工作区,可以简单认为是其他磁盘)使用(pnpm link --global A)。 发现 A产物编译的import React from 'react'
引入的并不是 B项目nodemodule
的react
。而是A组件库中nodemodule
的react
因为你 A 里的文件 react 指向的就是他自己的 node_modules,monorepo 里会更明显,解决方案,在 B 里用 alias 固定 react 指向 B node_modules 里的 react
正解!感谢大佬😁
我遇到个问题,我是通过类组件写的组件库,在类组件componentDidMount中使用ReactDom.findDomNode(this)报错,通过pnpm link global在别的应用使用会报错unable to find node on an unmounted component
你好,我想请问一下,gulp有没有将第3方依赖打包的压缩文件的插件,比如说我讲axios打包的压缩文件中,我在新项目引入压缩文件,不需要安装直接就能够使用axios
你好,我想请问一下,gulp有没有将第3方依赖打包的压缩文件的插件,比如说我讲axios打包的压缩文件中,我在新项目引入压缩文件,不需要安装直接就能够使用axios
gulp 的定位更倾向于 task runner 而非 bundler,我对 gulp 的使用也十分有限,不太确定是否存在,应该可以引入其他构建工具来达到目的
前言
组件库一直是前端开发不可或缺的一环,主要是为了开发提效,避免开发同学复制粘贴和重复造轮子。
xmly 内部其实一直没有一套基于 React 的组件库,主要是不同业务线的设计规范大相径庭,过于定制化了。
而对于某一条特定的业务线来讲,设计语言是能够也必须要达到统一的。
于是在部门内搭了一个简单的组件库,组件不多,但在搭建过程中掌握了很多知识,再看 antd 等热门组件库,对其中的一些设计也有了更深的感悟,故记录下来,希望能帮助到其他的同学。
🚀 在线预览
🚆 本地预览
按顺序执行完命令后,即可在
localhost:3000
看到以下内容:概览
本系列文章主要包含以下内容:
eslint
/commit lint
/typescript
等等;/umd
cjs
/esm
产物并支持按需加载;@testing-library/react
及其相关生态进行组件测试;初始化项目
新建一个
happy-ui
文件夹,并初始化。代码规范
此处直接使用 @umijs/fabric 的配置。
.eslintrc.js
.prettierrc.js
.stylelintrc.js
想自行配置的同学可以参考以下文章:
Commit Lint
进行
pre-commit
代码规范检测。package.json
进行 Commit Message 检测。
新增
.commitlintrc.js
写入以下内容package.json 写入以下内容:
后续使用
yarn commit
替代git commit
生成规范的 Commit Message,当然为了效率你可以选择手写,但是要符合规范。TypeScript
新建
tsconfig.json
并写入以下内容新增组件
在
src
文件夹下新建alert
文件夹,目录结构如下:安装
React
相关依赖:src/alert/index.tsx
src/alert/style/index.less
src/alert/style/index.ts
src/index.ts
git 一把梭,可以看到控制台已经进行钩子检测了。
项目初始化完成。