迁移到 Meteor 1.3

如何将您的应用程序迁移到 Meteor 1.3 中推荐的最佳实践。

重大更改

这些都是所有 *重大更改* - 也就是说,如果您要将应用程序从 1.2.x 更新到 1.3,则绝对需要关注的更改。但是,我们建议您也考虑下面其他部分中列出的 *推荐* 更改。

  • 确保您的项目具有一个 package.json 文件,这将成为 npm 包安装的基础。您可以通过运行以下命令创建它

        meteor npm init -y
    
  • 名为 imports/ 的目录中的文件将不再热加载。(您可能应该重命名此类目录,因为它是我们新的 模块系统 的基础)。

  • 应用程序中名为 *.test[s].**.app-test[s].**.spec[s].**.app-spec[s].* 的文件将不再热加载(如果文件不包含测试,您可能应该重命名它,因为它将由我们的新 应用程序测试模式 热加载)。

  • 如果您使用的是 React,您现在需要在应用程序中安装一组 React npm 包。有关更多详细信息,请参阅下面的 React 建议

移动

  • iOS 应用程序现在需要 iOS 8 或更高版本,并且构建 iOS 需要安装 Xcode 7.2 或更高版本。

  • 构建 Android 现在需要安装 Android SDK 23。您可能还需要为模拟器创建一个新的 AVD。

  • Cordova 已升级到最新版本(Cordova 6.0.0、Cordova iOS 4.0.1 和 Cordova Android 5.1.0)。这可能需要您升级插件版本。我们已将核心 Cordova 插件固定到已知兼容的版本,并在构建期间发出警告,但您可能会遇到第三方插件的编译时或运行时错误。如果这些插件已更新以与最新版本的 Cordova 兼容,则升级到这些插件的较新版本可能会有所帮助。

  • 用于提供应用程序文件和支持热代码推送的插件已完全重写。因此,文件现在从 localhost 而不是 meteor.local 提供服务,并且具有从您的 appId 派生的固定端口号。您可能必须更新 OAuth 重定向 URL 以指向新的本地域名和端口。

建议:模块

Meteor 1.3 中最大的新功能是在客户端和服务器上支持 ES2015 模块。使用模块,您可以声明文件之间的依赖关系,控制加载顺序,并在客户端和服务器上使用 npm 包。

  • 您应该使用 import { Name } from 'meteor/package' 语法加载所有 Meteor “伪全局”。例如
import { Meteor } from 'meteor/meteor';
import { EJSON } from 'meteor/ejson';
  • 您应该考虑安装 meteor-node-stubs npm 包,以允许在浏览器上使用为 node 编写的 npm 包
meteor npm install --save meteor-node-stubs
  • 如果您使用应用程序本地包来控制加载顺序并为您的应用程序编写单元测试,我们建议您切换到使用模块
    • package.js 文件中删除与 Package API 相关的代码,并将它们重命名为 index.js
    • 将您的本地包移动到 imports/ 目录。
    • 在包中的每个模块中添加必要的 import 语句。
    • 在包的每个导出中添加 export 语句。
api.addFiles('file.js');
// For files that are not imported elsewhere, this turns into
import './file.js';

// Remove from package.js
api.export('Foo');

// localPackage/foo.js
// Foo must be explicitly exported
export default Foo;

// client/main.js
import '/imports/localPackage';
  • 您可以在 Meteor 指南的 应用程序结构文章 中阅读我们推荐的应用程序和模块结构,以及如何在 测试文章 中测试它们。

  • 如果您使用的是 Atmosphere 包(在客户端和服务器上都包装了 npm 包),现在建议您使用 npm 安装它们。运行 npm init 初始化您的 package.json 并使用 npm install --save(或 npm install --save-dev 如果它是用于测试等的开发依赖项)安装包。我们有一些关于如何使用以异步样式编写的 npm 包的 提示

此外,您也不再需要使用 meteorhacks:npm 包。要迁移,请按照以下步骤操作

  1. 从您的应用程序中删除包:meteor remove meteorhacks:npm npm-container
  2. 删除生成的 npm-container 包:rm -r packages/npm-container
  3. packages.json 的内容移动到 package.jsondependencies 部分(您可能需要使用 meteor npm init 创建一个)。
  4. 使用 import 而不是 Npm.require()

建议:包作者

建议包作者

  • 不再发布仅包含 npm 包/客户端库的包装器包。但是,如果您的包在 npm 包周围添加了重要的包装器,则可能是有意义的。

  • 在适当的时候发布到 npm,特别是如果您的包可以被更广泛的 JS 社区使用!

  • 在 Atmosphere 包中使用 api.mainModule() 和来自主模块的 export 而不是 api.exports()

  • 如果您(直接或间接)依赖于一个客户端 npm 包,该包很大或如果安装两次会出现问题(例如 React),请使用 tmeasday:check-npm-versions 来声明“对等”依赖项。如果您依赖的客户端 npm 包是 angular,您可以使用 此解决方案 支持 Meteor 1.2 和 1.3。在 编写包文章 中阅读更多相关信息。

建议:测试

Meteor 1.3 包含一个新的命令 meteor test,它可以用来在两种模式下对您的应用程序运行测试。您可以在 测试指南文章 中更详细地了解这些功能。

完整应用程序测试

如果您之前使用 Velocity 对正在运行的 Meteor 应用程序运行测试,则完整应用程序测试模式应该允许您对 1.3 运行测试,并进行一些小的更改。

  • 要转换测试,您需要将测试驱动程序包更改或升级到与 1.3 兼容的包(在撰写本文时,只有一个选择 practicalmeteor:mocha,但我们预计将来会有更多选择)。您应该以 *.app-test[s].* 的模式命名您的测试文件,并将它们放在 *tests/* 目录 *之外*。要运行测试,您可以运行 meteor test --full-app --driver-package <driver-package>

  • 请注意,完整应用程序测试模式不会在与被测应用程序分开的应用程序中运行测试报告程序,也不会合并来自多个测试系统的结果,就像 Velocity 所做的那样。这实际上意味着,如果您使用多个测试系统,则需要多次运行 meteor test --full-app

  • 此外,这意味着某些类型的测试最好编写为 Meteor 工具之外的 验收测试

模块测试

如果您之前使用应用程序内包来对应用程序进行单元测试,则应切换到 基于模块的方法 并使用普通测试模式对其进行测试。

  • 要将您的单元测试转换为针对应用程序运行,首先升级您的测试驱动程序(请参阅 上面),然后将您的测试文件与它们正在测试的模块放在一起,并使用与 *.tests.* 匹配的名称。当您运行 meteor test --driver-package <driver-package> 时,此类文件将自动添加到您的“测试应用程序”中。您可以在每个测试文件中 import 您需要测试的模块。

  • 一些示例测试可以在 Todos 示例应用程序 中看到

建议:移动

除了上面 列出的一些重大移动更改 之外,移动集成工作方式还有一些更改,您应该考虑一下

  • 一些针对当前不支持的设备的低分辨率应用程序图标和启动图像大小已被弃用。要避免在构建期间出现弃用警告,请从您的 mobile-config.js 中删除这些条目。(您可能还想从项目中删除图像文件。)

  • 该插件现在允许在 iOS 和 Android 上访问本地文件。您可以手动构建文件系统 URL(https://127.0.0.1:<port>/local-filesystem/<path>)或使用 WebAppLocalServer.localFileSystemUrl() 转换 file:// URL。

从 npm 安装 React

在 Meteor 1.3 中,我们建议使用 npm 将 reactreact-dom 安装到您的应用程序中,并从您的应用程序代码中导入它们

import React from 'react';
import ReactDOM from 'react-dom';

重大更改 中所述,react Atmosphere 包仍然有效,但它现在期望您在应用程序中安装它使用的 React npm 包(阅读 使用包 文章以了解有关如何管理 npm 依赖项的更多详细信息)

npm install --save react react-dom react-addons-transition-group \
 react-addons-css-transition-group react-addons-linked-state-mixin \
 react-addons-create-fragment react-addons-update react-addons-pure-render-mixin \
 react-addons-test-utils react-addons-perf

**但是**,我们建议您停止使用 reactreact-runtime Atmosphere 包,而是直接从 npm 安装 React(有关更多详细信息,请参阅指南中的 React 文章)。要在现有应用程序中进行此更改,您可以运行

meteor remove react

# if you are using our data integration
meteor add react-meteor-data

npm install --save react react-dom react-addons-pure-render-mixin

然后,在您的应用程序中,您应该直接导入 React 而不是 依赖于全局 React 符号

import React from 'react';

如果您使用的是依赖于 reactreact-runtime Atmosphere 包的包,您仍然需要安装上面列出的完整 npm React 包列表,因此我们鼓励包作者更新他们的包以直接从 npm 导入 React。

使用 React 加载数据

react-meteor-data 具有一个 新的 createContainer 语法,用于以惯用的方式将 Meteor 的数据系统与 React 结合起来。我们鼓励您使用容器将数据加载问题与您的展示组件分离!

从 npm 安装 Angular

使用 Angular Meteor 应用,您可以安全地更新到 Meteor 1.3,而无需更改任何代码。您需要确保您使用的是最新的 angular Atmosphere 包 1.3.9_2

但是,在 Meteor 1.3 中,我们建议您使用 npm 将 angularangular-meteor 安装到您的应用中

npm install --save angular angular-meteor

并从您的应用代码中导入它们

import angular from 'guide/site/content/angular';
import angular

-meteor
from
'angular-meteor';

阅读 使用包 文章,了解有关如何管理 npm 依赖项的更多详细信息。

如果您已经使用 Atmosphere 包并希望迁移到 npm 包,则需要先删除 Atmosphere 包,但保留 angular-templates Atmosphere 包

meteor remove angular
meteor add angular-templates

npm install --save angular angular-meteor

然后,在您的应用程序中,您应该直接导入 angular,而不是 依赖于全局 angular

import angular from 'angular';
import angular-meteor from 'angular-meteor';

现有的 Angular Atmosphere 包

如果您是依赖于 angular:angular Atmosphere 包的包作者,您可以同时支持 Meteor 1.2 和 1.3,以便您的用户拥有一个无缝的更新过程

将您的 angular:angular 依赖项更改为弱依赖项

api.use('angular:[email protected]', 'client', { weak: true });

然后在初始化 angular 模块之前添加对 Meteor 1.2 和 1.3 的依赖项检查

if (!window.angular) {
  try {
    if (Package['modules-runtime']) {
      var require = Package['modules-runtime'].meteorInstall();
      require('angular');
    }
  } catch(e) {
    throw new Error('angular package is missing');
  }
}

angular.module('your.module', []);

新的指南文章

作为 1.3 版本的一部分,我们提供了一些新的指南文章和现有文章的更新部分

  • 有一篇 应用程序结构 文章,解释了如何组织您的文件并使用模块系统。

  • 有一篇 代码风格 文章,对如何确保代码格式的一致性提出了建议。

  • 有一篇 测试 文章,介绍了如何在 Meteor 中进行各种类型的测试。

  • 有一篇 React 文章,解释了如何最好地将 React 与 Meteor 结合使用

  • 有一篇 移动 文章,介绍了如何最好地使用我们的 Cordova 集成。

  • 有一篇 使用包 文章,解释了如何在您的应用中最好地使用 npm 和 Atmosphere 包。

  • 有一篇 编写包 文章,解释了编写 Atmosphere 包并在其中使用各种依赖项的实践。

  • UI/UX 文章已更新,以解释如何在 Meteor 应用程序中进行 i18n

在 GitHub 上编辑
// 搜索框