橙晨成
获得徽章 0
- #每天一个知识点# 打卡第二十一天
![[惊喜]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_93.5ee641b.png)
使用React可以很容易地创建插件，以下是一些创建React插件的步骤：
创建一个新的React组件：首先，创建一个新的React组件，该组件将是你的插件的主要逻辑。你可以使用类组件或函数组件，具体取决于你的需求。
设计插件的API：确定你的插件将接受哪些Props，并考虑插件的行为和功能。这将有助于确保插件易于使用和集成。
使用npm创建插件包：将你的React组件和相关的文件打包到一个npm包中。使用npm init命令来创建一个新的npm包，并确保你的组件和其他文件包含在其中。
提供样式：根据需要为你的插件提供样式表，并确保将样式与组件一起打包到npm包中。这将确保用户可以轻松地将样式应用到插件中。
编写文档和示例：为你的插件编写文档和示例代码，以便用户了解如何使用你的插件。这将有助于确保用户可以快速上手并理解你的插件的所有功能。
发布你的插件：将你的npm包发布到npm注册表中，使其他开发者可以安装和使用你的插件。使用npm publish命令来发布你的包。
维护和更新：随着时间的推移，你可能需要对插件进行维护和更新。确保维护文档和示例，并根据用户反馈和需求对插件进行更新和改进。展开赞过 评论1 - 打卡第二十天
![[嘿哈]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
#每天一个知识点# CSS-in-JS 是一种前端开发模式，允许开发者直接在 JavaScript 文件中编写 CSS 代码，它提供了一种新的方式来定义和组织组件的样式。与传统的 CSS 文件相比，CSS-in-JS 提供了动态样式、局部作用域、模块化和其他功能。
CSS-in-JS 的主要特点：
局部作用域: 默认情况下，CSS-in-JS 生成的样式是局部的，不会影响到其他组件。这解决了传统 CSS 的全局作用域问题，可以避免不同组件间的样式冲突。
动态样式: 由于样式是在 JavaScript 中定义的，因此可以轻松地使用变量、逻辑或函数来动态生成样式。
组件化: 样式可以与其对应的组件紧密地绑定在一起，这使得组件变得真正的“可重用”，因为它们的逻辑、结构和样式都被封装在同一个地方。
主题化和样式覆盖: 许多 CSS-in-JS 解决方案提供了主题化和样式覆盖的工具，使得定制和调整组件的外观变得简单。
无需额外的 CSS 预处理器: 由于 JavaScript 本身就是一种编程语言，所以不需要额外的工具或预处理器来创建变量、混合或嵌套。展开赞过 评论1 - #每天一个知识点# 打卡第十九天
![[紫薇别走]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_87.f741137.png)
Error: chunk common [mini-css-extract-plugin] Conflicting order. Following module has been added: * css ./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.8.1_webpack@5.78.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/.pnpm/registry.npmmirror.com+postcss-loader@7.3.3_postcss@8.4.18_webpack@5.78.0/node_modules/pos......
这个错误是由 mini-css-extract-plugin 抛出的，并与 Webpack 构建时样式的顺序有关。具体来说，它警告你存在冲突的 CSS 导入顺序，这可能会导致生产环境中的样式不如你预期。
为什么这是个问题？考虑这样一个场景：你在文件 A 中导入了一个样式文件1，并在文件 B 中导入了样式文件2。在开发环境中，你可能首先加载了文件 A，然后加载了文件 B，导致文件2中的样式覆盖了文件1中的样式。但在生产环境中，这两个文件的加载顺序可能会发生变化，导致样式的应用效果与你在开发环境中看到的不一致。
为了解决这个问题，你可以：
检查导入顺序：确保你的样式文件在项目中的导入顺序是一致的。避免在一个模块中首先导入样式 A，然后在另一个模块中首先导入样式 B。
使用 CSS Modules：CSS Modules 可以确保类名的局部范围，从而减少因全局样式冲突导致的问题。
禁用此检查：尽管这不是推荐的做法，但如果你确定导入顺序不会导致问题，你可以在 Webpack 配置中设置 mini-css-extract-plugin 的 ignoreOrder 选项为 true 来禁用此检查。展开赞过 评论1 - #每天一个知识点# 打卡第十八天
![[强]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
如果修改了 CSS 文件中的这些变量，但是没有改变文件大小，可能是因为上传组件的样式是通过 JavaScript 动态计算并设置的。在这种情况下，仅仅修改 CSS 中的样式变量是无效的，需要通过修改上传组件的配置或覆盖组件的样式来实现。
首先，确保你修改的变量名和位置是正确的。应该在上传组件所在的 CSS 文件中修改这些变量。
如果修改样式变量仍然无效，可以尝试以下方法：
检查上传组件是否支持自定义样式。有些组件可能有特定的样式属性或 API 可以用来设置文件的大小。
通过覆盖组件的样式来实现自定义大小。首先，查找上传组件的类名或选择器，然后在全局 CSS 文件中或者组件所在的 CSS 文件中覆盖该类名或选择器的样式，设置你想要的文件大小。展开赞过 评论1 - #每天一个知识点# 打卡第十七天
以下是关于 TypeScript 的一些关键要点：
静态类型检查： TypeScript 的最大特点就是支持静态类型检查。这意味着你可以在编写代码时指定变量、函数参数、对象属性等的类型，然后 TypeScript 编译器会在编译时检查这些类型，如果类型不匹配，编译器就会报错。
类和接口： TypeScript 支持 ES6 的类，并且增加了接口的概念。接口可以用来描述对象的结构，也可以用来描述类必须实现的方法和属性。
泛型： TypeScript 支持泛型编程，这使得你可以创建可以用于多种类型的可重用组件。
工具友好： 由于 TypeScript 的静态类型检查特性，它可以与现代的代码编辑器（如 VS Code）非常好地配合，提供诸如自动完成、类型推断、重构等强大的功能。
编译为 JavaScript： TypeScript 最终会被编译为 JavaScript 代码，这意味着你可以在任何支持 JavaScript 的环境中运行 TypeScript 代码。
集成到现有的 JavaScript 项目： 你可以逐渐地将 TypeScript 集成到现有的 JavaScript 项目中，因为任何有效的 JavaScript 代码也是有效的 TypeScript 代码。
总的来说，TypeScript 是一种强大、灵活且功能丰富的编程语言，它能够帮助你编写更健壮、更易于维护的代码。展开赞过 评论1 - #每天一个知识点# 打卡第十三天JavaScript是一种广泛使用的编程语言，用于在网页上实现交互和动态效果。以下是对JavaScript的概括总结：
功能：JavaScript是一种脚本语言，它可以让网页具有更丰富的功能和交互性。通过JavaScript，您可以操作页面元素、响应用户输入、处理表单验证、执行动画效果等。
客户端脚本语言：JavaScript主要在客户端运行，也就是在用户浏览器上执行。这意味着不需要服务器的参与，可以直接在浏览器中运行代码。
弱类型语言：JavaScript是一种弱类型语言，它不需要明确声明变量的数据类型。变量的类型会根据赋给它们的值自动推断。
面向对象：JavaScript支持面向对象编程（OOP），允许创建对象和定义对象之间的关系。它提供了类、对象、继承等常见的面向对象概念。
事件驱动：JavaScript通过监听和响应事件来实现交互。例如，当用户点击按钮时，JavaScript可以捕获该事件并执行相应的代码。
平台无关性：JavaScript可以在多个平台上运行，包括各种操作系统和设备。它与特定的操作系统或硬件无关。
应用领域：JavaScript最初是为网页开发而设计的，但现在它已经扩展到其他领域，如服务器端开发（Node.js）、桌面应用程序（Electron）和移动应用程序开发（React Native）等。展开赞过 评论1 - #每天一个知识点# 打卡第十二天在前端开发中，使用Taro + React + TypeScript进行小程序开发并实现图片上传可以按照以下步骤进行：创建图片上传组件：进入项目目录，并在src目录下创建一个新的组件，例如ImageUploader.tsx。这个组件将负责处理图片上传的逻辑。
在ImageUploader组件中引入需要的依赖库：根据具体需求，你可能需要引入一些相关的依赖库，如Taro UI、Axios等。可以使用npm或者yarn进行安装，并在组件中引入。
实现图片上传逻辑：在ImageUploader组件中，你可以通过Taro提供的API来实现图片上传的功能。例如，可以使用Taro.uploadFile来上传图片文件到服务器。在该函数中，你需要指定上传的URL、文件路径、文件名等参数，并处理上传成功或失败的回调函数。
在页面中使用ImageUploader组件：在你的页面组件中，可以引入并使用刚刚创建的ImageUploader组件。可以根据需要传递一些配置参数，如上传的URL、限制的文件类型等。展开赞过 评论1
![[惊喜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_93.5ee641b.png)
![[嘿哈]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
![[紫薇别走]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_87.f741137.png)
![[强]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)