在 2 秒内迁移您的插件工作区 - NativeScript 8 + webpack5 + 配置更新

只需一个命令，您就可以自动更新您的插件工作区，以使用 NativeScript 8、TypeScript 4.2、配置调整以及自动更新您的演示应用程序以使用 webpack5 设置。

无论您是管理 1 个插件还是 100 个插件套件，您都可以在几秒钟内开始使用最新版本。

早在 2020 年 9 月 14 日，我们引入了插件工作区来简化和简化您的 NativeScript 插件的维护。我们希望您正在使用此插件工作区种子来创建当今的 NativeScript 插件。在 Github 上，有一个有用的绿色使用此模板按钮，可以随时用来创建一个。

自 2020 年 9 月 14 日以来，NativeScript 已经添加了一些不错的功能和改进，您也应该享受这些功能和改进。

以下说明了为什么插件工作区方法很重要

nx migrate @nativescript/plugin-tools

这将在您的终端中产生以下结果

mac@user plugins % nx migrate @nativescript/plugin-tools
Fetching meta data about packages.
It may take a few minutes.
Fetching @nativescript/plugin-tools@latest
Fetching @nativescript/plugin-tools@2.0.0

>  NX  The migrate command has run successfully.

- package.json has been updated
- migrations.json has been generated

>  NX  Next steps:

- Make sure package.json changes make sense and then run 'yarn'
- Run 'nx migrate --run-migrations'

这将获取最新的插件工具并调整您的 package.json，以及添加一个migrations.json文件。运行yarn将安装更新的版本，然后运行迁移将为您处理所有事情

nx migrate --run-migrations

那一个命令将在几秒钟内更新您的工作区到

NativeScript 8
TypeScript 4.2.x
@nativescript/webpack (webpack5)
调整所有演示应用程序 webpack.config 以使用新的 webpack5 设置
调整所有演示应用程序包以使用正确的 main
修改演示应用程序 tsconfig 设置以匹配更新
调整所有具有 Angular 集成的插件以删除已弃用的 api
将 Angular 依赖项更新到最新的 v12
为 Angular 演示应用程序添加适当的 polyfill
调整演示-Angular 应用程序 main 引导以使用新的 api
向包 Angular 线束添加一个 tsconfig 以帮助 Angular 类型解析
调整工作区 tsconfig 以使用与 webpack5 一起使用的更新后的 NativeClass 变换器
更新 husky 设置以在预提交时改进自动代码格式化
其他一些小细节等。

也许您喜欢这种事情，但它真的看起来像是您想自己做的事情吗？在多个存储库中多次重复？

我们相信开发人员更喜欢专注于编写优秀的 NativeScript 插件；而不是在繁琐的任务上花费时间，以跟上 NativeScript 的所有最新配置改进和进步。

手动修补

根据您的编码风格和包语义，总有一些需要手动修补的地方。例如，从 TypeScript 4.0 -> 4.2 迁移时，Promise 设置通常需要定义一个适当的泛型。

为了说明这一点，您可能在迁移后构建时遇到以下错误

packages/local-notifications/index.android.ts:101:5 - error TS2794: Expected 1 arguments, but got 0. Did you forget to include 'void' in your type argument to 'Promise'?

101     resolve();
        ~~~~~~~~~

  node_modules/typescript/lib/lib.es2015.promise.d.ts:33:34
    33     new <T>(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;

像这样的事情在 TypeScript 更新中是完全正常的。修复方法很简单。在packages/local-notifications/index.android.ts中，有一个方法的返回类型是

addOnMessageReceivedCallback(onReceived: (data: ReceivedNotification) => void): Promise<any> {

由于 Promise 没有返回值，TypeScript 正在帮助您的代码更明确地说明其用法。更新到正确的 Promise 返回类型可以解决此问题

addOnMessageReceivedCallback(onReceived: (data: ReceivedNotification) => void): Promise<void> {

请注意Promise<any> -> Promise<void>。

添加了新命令

这些更新中添加了 2 个新命令，可以帮助您管理插件（或插件套件）。

插件种子带有 vanilla 和 Angular 风格的演示。如果您想添加其他演示来针对不同的风格测试您的插件，您现在可以轻松地做到这一点

npm run add-demo将提示您要生成哪个额外的演示风格（React、Svelte或Vue）

如果您添加了一个实验性插件，或者您只是想删除它

npm run remove-package将提示您要删除哪个包，并将删除该包、它的配置以及与其关联的所有共享演示文件和演示风格文件。

关于 yarn 的说明

yarn在处理瞬态依赖项方面做得很好，建议在使用包含其他依赖项树的工作区风格开发中使用（例如工作区内的演示应用程序的依赖项树）。

插件工作区即将迎来另一项改进，它将将 yarn 工作区与 Nrwl Nx 结合在一起，进一步提高维护的便捷性，因此今天使用yarn将有助于确保此后续改进能够在不久的将来帮助您。

享受您的插件工作区 - 它是一个值得照料的花园

我们将随着时间的推移不断改进插件工作区，通过简便的迁移为您提供更多便利。我们强烈推荐它们。