迁移到 NativeScript 6.0

·

备受期待的 NativeScript 6.0 版本非常危险！此版本中的两个最大更改是对 AndroidX 的支持和捆绑（仅适用于 webpack）工作流程。两者都可能需要对现有项目进行更改。请关注此博客文章，以了解如何将应用程序代码迁移到 NativeScript 6.0。

tns 迁移

tns migrate是一个新的 CLI 命令，旨在帮助 NativeScript 6.0 迁移过程。在现有项目中执行此命令将更新：

• CLI 使用的构建配置文件（“ webpack.config.js”，“ karma.conf.js”，“ tsconfig.tns.json”）。
• 大多数插件依赖于版本，与 6.0 兼容。

更新您的 NativeScript CLI 并在您的项目中执行迁移命令：

npm install --global nativescript@latest
tns migrate

然后，使用熟悉的命令运行该应用程序：

tns run

如果在开发工作流程中遇到问题，则可能需要更改应用程序代码以使其与 NativeScript 6.0 兼容。阅读本文的其余部分以了解操作方法。如果未提及您的问题，请在 Github 上打开一个问题。

AndroidX

NativeScript 6.0 支持 Android 扩展库（AndroidX）。不再支持 Android 支持库。依赖于支持库的任何应用程序和插件代码都必须开始使用 AndroidX。要了解如何迁移，请关注专门的博客文章。

CLI 挂钩

NativeScript CLI 挂钩允许您自定义 CLI 命令的执行。它们被广泛用于 NativeScript 插件中。在版本 6.0 中更改了 hooks API。如果您的构建因以下错误而失败，则您可能正在使用过时的插件：

Cannot read property X of undefined.

要了解如何更新过时的挂钩，请参考本文。

捆绑工作流程

在 6.0 版之前，NativeScript 用于支持两种构建应用程序的方式：

• tns build-传统工作流，它将源代码目录（src /）的全部内容复制到已构建的应用程序中；

• tns build --bundle-捆绑工作流程，它依赖于 webpack 将源代码目录（src /）捆绑为几个输出文件。

NativeScript 6.0 仅支持捆绑软件工作流程。更新项目时，您需要确保可以使用 webpack 构建它。NativeScript 团队付出了很多努力来缩小遗留工作流程和捆绑工作流程之间的差距。但是，这两种方法截然不同，它们的行为无法完全统一。在下面，您将发现它们之间最常见的区别，以及每个步骤的迁移步骤。

静态资产必须手动加载

项目类型

所有

代码样例

以下代码尝试加载本地文件-/ assets/shipping.json。

export class CartService {
...
  getShippingPrices() {
    return this.http.get('/assets/shipping.json');
  }
}

旧版工作流程

源目录中的所有文件都是已构建应用程序的一部分。这就是/assets/shipping.json 文件将可用并成功加载的原因 。

捆绑工作流程

Webpack 只编译源代码中明确要求的文件或 webpack 插件包含的文件。使用默认设置时，/ assets/shipping.json 将不会在生成的应用程序中，并且请求将失败。

移民

配置CopyWebpackPlugin将静态资源从您的项目移至已构建的应用程序。

webpack.config.js
module.exports = env => {
…
    const config = {
        ...
        plugins: [
        ...
             new CopyWebpackPlugin([
                { from: { glob: "assets/*.json" } },
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.jpg" } },
                { from: { glob: "**/*.png" } },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
}

工作线程

项目类型

所有

移民

您需要使用 nativescript-worker-loader 插件创建工作线程。确保使用下一个标签安装软件包：

npm install nativescript-worker-loader@next --save-dev

请参考文档以根据项目类型迁移代码。

模板和样式路径必须是相对的
项目类型
角度的

代码样例
请考虑位于app / item / items.component.ts中的以下代码，该代码使用绝对路径 templateUrl：

@Component({
    selector: "ns-items",
    templateUrl: "app/item/items.component.html"
})
export class ItemsComponent {
...

旧版工作流程

用于支持上述语法的旧式工作流程。

捆绑工作流程

捆绑软件工作流程不支持以上语法。的 templateUrl 和 styleUrls 路径相对于当前模块解决。

移民

将绝对路径转换为相对路径：

@Component({
    selector: "ns-items",
    templateUrl: "./items.component.html"
})
export class ItemsComponent {
...

导出对象不能在 TS 项目中使用

项目类型

打字稿

代码样例

以下代码使用该exports 对象导出函数：

exports.onTap = function() {
  alert('Hi there');
};

旧版工作流程

用于支持上述语法的旧式工作流程。

捆绑工作流程

捆绑软件工作流程不支持以上语法。

移民

改用 export 关键字：

export function onTap() {
  alert('Hi there');
}

专家提示

通过捆绑工作流程，您现在可以在所有类型的项目中使用 ES6 模块语法（导入和导出）。优先于 CommonJS（需求和导出），以帮助 webpack 消除捆绑中所有未使用的导出。

dirname 和filename 的不同值

项目类型

所有

代码样例

考虑以下代码位于 app / nested-folder / test.ts 中：

console.log('__dirname', __dirname);
console.log('__filename', __filename);

旧版工作流程

在旧版工作流程中，项目结构以前在构建的应用程序中保持不变。执行上面的代码将产生以下控制台输出：

__dirname / data / data / org.nativescript.ns5 / files / app / nested - folder;
__filename / data / data / org.nativescript.ns5 / files / app / nested - folder / main - page.js;

捆绑工作流程

在捆绑工作流程中，已构建的应用程序打包在几个输出文件中。文件位置不保留。上面代码的输出将是：

__dirname / data / data / org.nativescript.ns6 / files / app;
__filename / index.js;

移民

您可以使用module.id获取原始文件路径。

console.log(module.id); // ./nested-folder/main-page.ts

但是，如果您要进行生产生产，module.id将是一个数字。要强制 webpack 继续使用文件 ID 作为模块 ID，请将namedModules优化属性设置为true：

module.exports = env => {
…
    const config = {
        ...
        optimization: {
             namedModules: true
         }
}

在__dirname将指向包文件的绝对路径。使用__dirname和module.id您可以计算模块的原始绝对文件路径和目录。

枚举值未内联

项目类型

打字稿

代码样例

以下代码声明一个枚举而不定义它，然后使用它：

declare const enum TestEnum {
  value1 = 1,
  value2 = 2
}
console.log('Printing the second enum value: ', TestEnum.value2);

旧版工作流程

支持以上语法。过去的工作流程曾经依靠 nativescript-dev-typescript 插件执行 TypeScript 编译。用于启动 TypeScript 编译器的插件- tsc。

捆绑工作流程

捆绑软件工作流程ts-loader在transpileOnly模式下使用。枚举值未内联。运行上面的代码将导致参考错误：

ReferenceError: TestEnum is not defined

移民

您需要在webpack.config.js文件中修改几个设置。在“ ts-loader”的配置中，将“ transpileOnly”设置为“ false”。另外，请确保删除“ ForkTypeChecking”插件。