NativeScript Webpack 0.9.0 — 变化内容和升级方法

昨天我们发布了 NativeScript Webpack 插件的新版本，其中包含一些重要的更改。在本文中，我们将向您介绍我们进行这些更改的原因，以及您需要在应用中进行哪些更改才能升级。

Angular 5 支持

在 NativeScript 3.4 中，我们添加了对 Angular 5 的支持，而 Angular 5 的 webpack 则附带了一个新的 AngularCompilerPlugin。该插件在内部创建一个 TypeScript 编译器实例，并在编译期间使用该实例作为 webpack 文件系统的基础。

由于该更新，我们不得不进行一些更改以支持我们在 NativeScript 中使用的模块和资源解析约定，例如平台特定的文件，如 my-component.ios.html 和 my-component.android.html。我们对 AngularCompilerPlugin 的新扩展 NativeScriptAngularCompilerPlugin 具有更快的构建时间，并且为我们将来使用 webpack 的 --watch 标志打开了可能性。

NativeScript Core Webpack

对于 NativeScript Core 应用，webpack 配置现在将包含一个 PlatformFSPlugin，并以类似于 NativeScriptAngularCompilerPlugin 的方式映射平台特定的文件。

此更改使我们能够在注册模块时支持使用 webpack 上下文。您的应用的 bundle-config.js 文件现在将自动包含所有您的 page.xml|js|css 文件。以前，只会从注册的模块中使用 .js 和 .xml 文件。

希望我们最终能够允许社区编写自定义 XML 加载程序，这些加载程序将处理组件注册和 XML 到 JavaScript 的提前编译。这应该很有趣！

注意：NativeScriptAngularCompilerPlugin 默认使用即时编译，您需要使用单独的标志来启用提前编译。查看 NativeScript webpack 文档的这一部分以获取更多信息。

CSS 加载程序

Webpack 的 css-loader 现在可以用来解析 NativeScript 核心模块中使用的 CSS 文件。这包括所有普通 NativeScript 应用的 .css 文件，以及 Angular 应用的 app.css 文件。您的 app.css 现在将捆绑在您的 vendor.js 文件中，因此它将在 Android 快照生成期间进行解析。此功能在 NativeScript 核心模块中已准备就绪，但必要的 webpack 配置尚未发布。现在发布了！

SCSS 支持

SCSS 现在受 webpack 和非 webpack 应用以及 Angular 组件、原生 NativeScript 页面和 app.scss 文件的支持。所有这些文件类型也支持平台特定的后缀。

与 NativeScript CLI 集成

在 NativeScript v3.4.0 和 nativescript-dev-webpack 0.9.0 之前，使用 webpack 构建需要运行外部 npm 脚本。随着 NativeScript 3.4 CLI 版本的发布，我们将 webpack 插件直接集成到 NativeScript CLI 中——无需单独的 npm 脚本。

例如，在 NativeScript 3.4 之前，您将运行以下命令以使用 webpack 捆绑运行 Android 应用。

npm run start-android-bundle

使用 NativeScript 3.4，您现在可以运行以下命令来完成相同的任务。

tns run android --bundle

此集成使传递其他 CLI 选项（例如配置文件（例如 tns run ios --bundle --provision NativeScriptDevProfile））变得更加容易，并且它也为我们提供了一条在将来集成 webpack 监视器和调试的途径。

更新您的项目

现在我们已经介绍了更新 webpack 插件的原因以及我们所做的更改，让我们看看如何升级您的应用。

先决条件

您首先需要安装最新（当前为 3.4.0）版本的 NativeScript CLI。

npm i -g nativescript

接下来，您需要通过运行以下命令来更新项目的平台和 tns-core-modules 依赖项。

tns update

更新 nativescript-angular 插件

如果您在 NativeScript 应用中使用 Angular，则接下来需要更新到 NativeScript Angular 插件的 5.0 版本。

npm install --save [email protected]

之后，您还需要更新您的 Angular 版本。具体来说，您需要将您的 @angular/ 依赖项更新到 ~5.0.0 版本，将您的 rxjs 依赖项更新到 ^5.5.0 版本，并将您的 typescript 依赖项更新到 ~2.4.2 版本。您还需要添加一个额外的依赖项——@angular/platform-browser-dynamic。

您可以使用下面的脚本执行所有这些操作

./node_modules/.bin/update-app-ng-deps

更新 nativescript-pro-ui 插件

如果您在 NativeScript 应用中使用 NativeScript Pro UI，则下一步是将其更新到最新版本（当前为 3.3）。

npm install --save nativescript-pro-ui@latest

更新 nativescript-dev-webpack 插件

在处理完这些依赖项后，接下来将您的 NativeScript webpack 插件更新到 0.9.0 版本。

npm install --save-dev [email protected]

注意：请确保您已提交所有与 webpack 相关的文件的当前版本

./app/vendor-platform.android.ts
./app/vendor-platform.ios.ts
./app/vendor.ts
./webpack.config.json

您可以使用以下命令为插件的新版本生成这些文件的新版本

./node_modules/.bin/update-ns-webpack --configs --deps

接下来，您需要将之前对新生成的文件进行的任何自定义配置应用到这些文件上。

CSS 导入

如果您有引用 node_modules 中文件的 CSS 导入，则需要在它们前面加上波浪号 (~)。

例如，如果您有 nativescript-theme-core 包，则需要在您的 app.css 文件中进行以下更改

之前

@import 'nativescript-theme-core/css/core.light.css';

之后

@import '~nativescript-theme-core/css/core.light.css';

注意：这与 ~/ 不同。

~（仅波浪号）将解析相对于 node_modules 的路径。
~/（波浪号和斜杠）将解析相对于 app 目录的路径。

修改 Bundle-Config

此步骤仅适用于 NativeScript Core 项目（即不使用 Angular 的应用）。

您现在可以使用正则表达式注册应用的 XML、CSS 和 JavaScript 资源，而不是逐个列出它们。以下是如何修改您的 bundle-config.js 或 bundle-config.ts 以执行此操作

if (global.TNS_WEBPACK) {
    // registers tns-core-modules UI framework modules
    require("bundle-entry-points");

    // register application modules
    // This will register each `page` postfixed xml, css, js, ts, scss etc. in the app/ folder
    const context = require.context("~/", true, /(page|fragment)\.(xml|css|js|ts|scss|less|sass)$/);
    global.registerWebpackModules(context);
}

这是这些代码更改的链接
https://github.com/NativeScript/template-hello-world/commit/9121973bd3289358284b0da9d33a98e7624c4955

更新 Typescript 插件

对于 TypeScript 和 Angular 项目，您还需要通过运行以下命令来更新您的 nativescript-dev-typescript 插件

npm install --save-dev nativescript-dev-typescript@latest

AOT 和 JIT 的单个 tsconfig

此步骤仅适用于 Angular 项目。

您现在可以删除您的 tsconfig.aot.json 文件。但是，您需要更新您的 tsconfig.json 文件，现在仅排除 node_modules 和 platforms 文件夹

   "exclude": [
       "node_modules",
       "platforms",
       "**/*.aot.ts"
   ]

在您的 main.aot.ts 中，您可能具有以下导入

import { AppModuleNgFactory } from "./app.module.ngfactory";

ngfactory 文件是在 AOT 编译期间动态生成的。为了满足 Typescript 静态检查，请添加一个 app.module.ngfactory.d.ts 文件，内容如下

export const AppModuleNgFactory: any;

运行/构建您的项目

现在升级已完成，您可以开始使用 NativeScript webpack 插件的新版本构建您的应用。由于 NativeScript CLI 现在直接支持 webpack 插件，因此您可以删除您可能在 package.json 文件中为使用 webpack 构建/运行应用而创建的任何现有脚本。

清除这些旧脚本后，继续尝试使用新的 --bundle 标志以确保一切正常。

tns run ios/android --bundle
or
tns build ios/android --bundle

您可以传递几个选项来配置 webpack 构建

--env.aot - 启用 Angular AOT。注意：默认情况下为 false
--env.snapshot - 启用 V8 快照（仅限 Android）
--env.uglify - 启用 uglify
--env.report - 输出 webpack 构建报告

注意：实时同步仍不受 webpack 构建的支持。这是我们将来会努力改进的内容。令人兴奋的时刻即将到来 😄

如果您在升级过程中遇到任何问题，请随时在 NativeScript 社区论坛上联系我们，如果您发现 webpack 插件本身存在问题，请在 GitHub 上报告这些问题。