Using local component changes in apps without tag and export - bit link --target

Summary

本视频介绍了如何使用 Bit 的 Link Target 功能，帮助开发者在本地工作区实时更新并反映到任何消费项目中。通过简单的命令，用户可以将 Bit 组件与目标应用程序连接，实时同步更新。视频详细演示了如何设置、运行 Bit Watch 和 Bit Link Target 命令，并解决 Webpack 缓存问题。此外，讲解了如何管理 React 版本差异和恢复默认依赖关系，确保开发流程流畅高效。

Takeaways

• 😀 使用 Bit Link Target 功能可以将本地 Bit 组件与任何消费项目连接，使得修改后的组件能够立即反映在应用中。
• 😀 只需运行 `bit watch` 命令，监视组件文件并自动编译更新，无需每次手动运行 `bit compile`。
• 😀 通过运行 `bit link -D Target` 命令，可以将 Bit 组件链接到目标应用的 `node_modules` 目录中，确保组件的更改会同步到应用中。
• 😀 使用 `-D peers` 标志可以确保 Bit 组件与目标应用中的 React 版本兼容，解决版本冲突问题。
• 😀 删除 Webpack 缓存文件夹并重新启动应用，有助于解决 Webpack 未能检测到来自 `node_modules` 组件更改的问题。
• 😀 Bit Link Target 功能特别适用于 React 项目，可以无缝地将本地开发的 Bit 组件与实际项目连接，提升开发效率。
• 😀 需要特别注意不同版本的 React 之间的兼容性，如果 Bit 组件和应用使用不同版本的 React，可能会导致冲突。
• 😀 若要恢复到常规依赖，运行 `npm install` 命令可以删除所有通过 Bit Link 创建的符号链接，并恢复常规的应用行为。
• 😀 为了避免 Webpack 无法自动重新加载来自 `node_modules` 的更改，需在 Webpack 配置中添加监视选项。
• 😀 若希望每次运行 `npm install` 时自动重新链接 Bit 组件，可以创建一个 `bit sync` 脚本来简化操作，避免手动执行 `bit link Target`。

Q & A

什么是Bit Link Target功能？

Bit Link Target功能允许你在Bit工作空间中开发组件并实时将更新链接到一个外部应用程序（如React应用），使得任何对组件的更改都能立即反映在使用该组件的应用程序中。

如何设置一个消耗应用程序（Consuming Application）？

首先，创建一个React应用（如使用`create-react-app`），并将组件作为常规的node模块安装到该应用中。

如何使用`bit watch`命令？

`bit watch`命令会持续监视Bit工作空间中的组件文件，一旦检测到更改，就会自动编译更新。这样可以确保每次修改后不需要手动运行`bit compile`。

如何将Bit工作空间中的组件链接到消耗应用程序？

使用`bit link -D Target <应用路径>`命令将Bit工作空间中的组件链接到消耗应用程序的`node_modules`文件夹，这样一来，任何更新都会自动反映在应用程序中。

如何解决Web应用程序未显示更新的问题？

如果应用程序未显示更新，可能是WebPack缓存问题。你需要删除`node_modules/.cache`文件夹中的缓存，然后重新启动应用程序。

`bit link`命令中的`-D peers`标志有什么作用？

`-D peers`标志确保正确链接组件的peer依赖关系，例如React版本，这可以防止因React版本不同而导致的问题。

如果需要撤销组件链接，如何恢复应用程序的常规依赖？

只需运行`npm install`命令，这会删除所有的符号链接，并恢复应用程序的常规依赖行为。

在开发过程中，如何确保实时更新的显示？

确保Webpack配置监视`node_modules`文件夹，并添加适当的`watchOptions`，以使得来自Bit工作空间的组件更新能够即时反映到应用程序中。

在使用Bit时如何解决React版本冲突问题？

如果工作空间使用React 18而应用程序使用React 17，你可以通过使用`-D peers`标志来正确链接这些依赖关系，或者根据具体情况调整React版本以确保一致性。

如何自动化`bit link Target`的重新链接过程？

你可以在`package.json`中创建一个自定义脚本（如`npm run bit-sync`），该脚本会自动执行`bit link Target`命令，从而在需要时重新链接组件。