用比特在应用程序之间共享JavaScript代码

比特允许你把你的代码的每一部分都看作是一个独立的组件，独立是因为它可以被比特跟踪和版本控制，而且它有自己的依赖关系，而组件是因为它容易维护，可以很容易地在同一个项目中使用，甚至可以安装到一个完全不同的项目中，而这个项目将需要该组件。

但是等一下，如果我告诉你，比特也允许你把你的JavaScript函数作为独立的组件来处理呢？这意味着你可以轻松地重用以前项目中的JavaScript函数，或者在你的项目中重用别人创建的函数，而不需要进行复制和粘贴。

我知道你可能会问，复制和粘贴代码有什么问题吗？嗯，是的。每个开发者都会这样做。事实上，复制和粘贴已经救了我好几次。然而，对于Bit来说，当你安装一个组件时，只要该组件有变化，你就会得到更新，所以当该组件的新版本发布时，你也会得到它。听起来很有趣，对吗？让我们深入了解一下这个教程。

目标

在本教程结束时，你应该能够。

创建JavaScript函数组件。
将JavaScript函数组件导出到你在Bit.cloud上的范围。
在你的项目中安装JavaScript函数。
将组件导入你的项目中。
修改、标记和导出组件。

要求

在你的本地机器上安装比特二进制，如果你还没有。
开设一个比特云账户
拥有JavaScript的基本知识

本教程将分为两部分：第一部分将集中于创建和导出一个JavaScript函数组件，第二部分将包括将第一部分中创建的函数组件安装到不同工作区的不同组件中，以及导入相同的JavaScript函数组件并进行一些修改。

下面是我在比特云上的范围的一个链接

https://bit.cloud/aviatorscode2/theaviatorcodes2
复制代码

第一部分。创建和导出一个JavaScript函数作为一个组件

在我们继续学习教程之前，请允许我为你描述一个场景

Emy在她正在进行的一个JavaScript项目中使用了组件驱动方法。她刚刚实现了一个计算两个日期之间相对差值的函数，然后她把这个函数作为一个独立的组件导出到她的Bit cloud范围。

在这一点上，如果你还没有在你的本地机器上安装比特二进制，你可以通过在你的终端上运行这个命令来做到这一点

npx @teambit/bvm install
复制代码

这一部分我们将遵循的步骤是。

创建一个Bit工作区
为JavaScript函数创建一个组件
编写你的JavaScript函数
将创建的函数导出为一个组件

创建一个Bit工作区

你可以用两种方法来创建Bit工作区，我将在第一部分使用其中一种方法，在本教程的第二部分使用第二种方法。

要创建一个新的工作区

在你选择的任何目录中创建一个文件夹
使用终端或代码编辑器打开该文件夹
运行下面的代码来初始化该文件夹中的比特

bit init
复制代码

运行上述命令后，你会注意到你的文件夹内有这些文件，当你看到这些文件时，说明你已经成功创建了一个Bit工作区。

工作区文件夹结构

下一件事是进入 workspace.jsonc文件，将默认范围改为你在Bit.cloud上的远程范围。要了解更多关于比特范围的信息，请点击下面的链接。

Bit - 组件驱动的开发

将默认的范围从 "my-scope" 改为你在比特云上的远程范围的名称。我的作用域的名称是 "aviatorscode2.theaviatorcodes2"

最初的远程作用域

改为我在比特云上的默认作用域的名称

创建你的JavaScript函数组件

创建你的Bit工作空间后，下一件事是创建你的函数组件。你可以通过在你的代码编辑器终端运行下面的命令来创建一个JavaScript函数组件

bit create node <component-name>
复制代码

上面的命令告诉Bit从节点模板中创建一个组件，组件名称由你选择。

create命令用于创建一个比特模板组件

****将是你决定给组件的任何名字，我把我的称为 日期格式化.如果该命令运行成功，你会注意到一个额外的文件夹。

接下来是什么？

下一步是编写你的JavaScript函数，你所需要做的是，进入你刚刚创建的组件文件夹，进入到 Date-formatter.ts文件，写一些JavaScript代码，如果你用不同的名字来命名你的组件，找到带有你的组件名称和扩展名的文件。 .ts 扩展名。

在这个 日期格式化.ts文件中，我创建了一个简单的实用函数，用于查找两个日期之间的相对差异。

如果你不想打出这段代码，你可以用下面的代码分叉这个组件

bit fork aviatorscode2.theaviatorcodes2/date-formatter@0.0.1
复制代码

medium.com/media/4c643…

在我的 Date-formatter.spec.ts中，我为我的组件写了一个简单的单元测试。

medium.com/media/f9783…

**注意：**Bit自带测试库，所以你不需要安装任何其他测试库。如果出于任何原因，你从测试库中得到一个错误，只要运行下面的命令即可

bit install
复制代码

我还在我的文件中创建了一个基本的组成文件。 data-formatter.composition.tsx，这个组合文件有助于你的组件的用户知道如何使用它。

medium.com/media/3dacd…

在我们继续之前，你需要在浏览器上运行你的本地工作区。比特服务器将在localhost:3000上运行。

要在浏览器上启动你的工作区，运行下面的命令

bit start
复制代码

在浏览器上运行比特工作区

嘣！！！你的Javascript组件已经准备好被导出到比特云的远程范围了。

在你导出你的组件到远程范围之前，你首先需要对它进行标记。标记会创建一个标有发布版本的可导出组件，这有助于跟踪该组件的任何变化，也有助于使用你的组件的组件/项目在有变化时获得更新的版本。另外，在标记阶段，Bit会对你的组件进行测试，并建立组件的工件和dist文件夹。

bit tag --message "First release version"
复制代码

如果标记成功，你应该在你的终端看到类似这样的东西

new components
复制代码

现在，把你的组件导出到你的远程范围，这样它就可以被其他开发者使用。要做到这一点，运行下面的命令

bit export
复制代码

这里有一个关于如何导出你的组件的视频

medium.com/media/12879…

第2部分：将JavaScript函数组件导入你的项目中

关于本教程的第二部分，请允许我描述另一个场景。

假设乔纳森正在开发一个Booking应用程序，在构建这个应用程序时，他发现他需要开发一个功能，能够分辨两个不同的日、月和年之间的相对差异，然后他想起他遇到了一个类似的函数组件，Emy在Bit.cloud上创建的。因此，他不必从崩溃中建立自己的功能，也不必把Emy的代码复制和粘贴到他的项目中。有了Bit，他可以直接把那个JavaScript组件安装到他的项目中，并立即使用它。

以下是乔纳森为实现这一目标将采取的步骤。

创建一个新的比特工作区
创建一个新的React组件
安装JavaScript函数组件

以下是我为相对日期组件创建的远程范围的链接

https://bit.cloud/aviatorscode2/demo
复制代码

创建一个新的比特工作区

记得我在本教程第一部分中告诉过你，我将向你展示两种创建新工作区的方法，对于第二种方法，请在终端运行以下代码

bit new react <workspace-name>
复制代码

新命令告诉Bit这是一个新的工作区，它应该用所选工作区模板（即React）中定义的工作区所需的必要文件来初始化它。

**<工作区名称>**是你想给你的工作区起的名字，你可以选择任何你喜欢的名字，我把我的工作区称为 React-app

如第一部分所述，在创建一个新的工作区后，到 workspace.jsonc文件，将默认的作用域从 "my-scope" 改为你在bit.cloud上的远程范围的名称。

创建一个新的Bit React组件

在这一部分，我们将使用React模板来创建我们的组件，你可以在你创建的工作空间内运行这个命令来创建一个新的Bit react组件。

bit create react <component-name>
复制代码

导入JavaScript函数组件

接下来我们需要做的是将我们在第一部分中创建的JavaScript函数组件导入这个新的工作空间。

对于每一个创建并导出到比特云的组件，比特提供了一个CLI命令列表，你可以用它来分叉、导入或安装该组件到你的工作区。

你可以通过以下步骤完成这个任务

进入bit.cloud
找到你想导入到你的项目中的组件
点击它
点击使用按钮，会出现一个CLI命令列表

这里是比特云上这个组件的链接

https://bit.cloud/aviatorscode2/theaviatorcodes2/date-formatter
复制代码

所以要把这个组件安装到你的工作区。

复制CLI命令来安装该组件
将该命令粘贴到你的工作区并运行

bit install @aviatorscode2/theaviatorcodes2.date-formatter
复制代码

如果命令运行成功，一个以你的bit.cloud范围命名的新文件夹将出现在你的node_modules中，作为一种依赖，可以在你的应用程序中使用。

利用导入的 JavaScript 函数组件

为了使用函数组件，使用导入语法将其导入到你需要的文件中。在本例中，我们需要把它导入到 relative-date.tsc文件中。

如果你不想打出代码，你可以使用下面的命令分叉这个组件

bit fork aviatorscode2.demo/relative-date
复制代码

medium.com/media/6843e…

我创建了一些变量并将它们作为参数传入 dateFormatter函数中。为了确定它能正常工作，在浏览器上用这个命令运行你的Bit服务器

bit start
复制代码

当你点击依赖性按钮时，你会看到一个依赖性图表，显示该 相对日期组件目前正在使用当前版本的 日期格式组件的当前版本，即0.0.1

修改JavaScript函数

现在，JavaScript函数已按预期工作，你也可以修改该Javascript函数组件。这一次，你将使用import CLI命令，而不是使用install CLI命令。

复制import命令并在终端或代码编辑器上运行该命令，如果导入成功，你将看到一个新的组件文件夹，这次不是作为一个依赖关系，而是作为一个可以修改、标记和导出的组件。

在浏览器上旋转你的工作区，查看当前工作区中的组件，使用这个命令

bit start
复制代码

现在，你可以修改JavaScript函数组件以满足你的需要。

为了测试它，我对 日期格式化函数做了一些小修改。

medium.com/media/f5bf9…

标签和导出

目前的组件测试和组成仍然工作正常，所以没有必要再写一个新的。

最后，你现在可以标记并导出 相对日期和 日期格式化组件到比特云上的远程范围。

要做到这一点，你需要运行下面的命令

bit tag --message "new release"
复制代码

如果你喜欢单独标记你的组件，你仍然可以通过使用这个命令来做到这一点

bit tag <component-name> --message "new release"
复制代码

即使没有在 日期格式化 组件，Bit也会自动标记该组件，从0.0.1到0.0.2版本。

当你成功地标记了你的组件后，你可以使用导出命令将它们导出到你的远程范围

bit export
复制代码

在你必须导出你的组件后，去你在比特云上的远程范围，检查 相对日期组件，你会看到该 相对日期组件目前正在使用最新版本的 日期格式组件。

这里是比特云上相对日期组件的链接

https://bit.cloud/aviatorscode2/demo/relative-date
复制代码

结语

本教程到此结束，我们已经达到了本教程的目的，现在你应该能够成功地创建一个JavaScript函数组件，将其导出到远程范围，安装并导入一个JavaScript函数组件到你的项目中，还可以随意修改该组件。

如果你觉得本教程有帮助，请在下面留言，如果你在使用Bit时有任何问题，希望我们写一篇文章，我们会帮助你。