Sencha Cmd 6 升级指南

本指南旨在帮助使用 Sencha Cmd 的开发人员从 Ext JS 5.x 或 Sencha Touch 2.4.x 迁移到 Ext JS 6.0.x。尽管此版本中存在一些重要的更改，但我们已尽力使升级过程尽可能轻松。在深入探讨之前，值得一提的是，本指南做出了一些假设。

• 您的应用程序是使用 Ext JS 5.x 或 Sencha Touch 2.4.x 构建的
• 您的应用程序是使用我们推荐的 MVC 模式布局的
• 您的应用程序当前正在使用 Sencha Cmd 构建

我们认识到，并非所有客户都能享有运行最新版本的框架和 Sencha Cmd 的便利。时间限制、截止日期和支持许可证通常决定了企业中使用的版本。如果您的应用程序基于较旧版本的 Sencha 框架，您应该查阅专门针对这些版本的升级指南，作为进一步信息的起点。例如，Sencha Cmd 5 升级指南。

安装程序更改

在 Sencha Cmd 6 中，我们引入了新的安装程序，允许非管理员/root 用户安装应用程序。我们还包含了 Sencha Cmd 所需的 Java 运行时环境 (JRE)，因此您无需单独下载和安装它。如果您有以前版本的 Sencha Cmd，则在升级中可能会遇到一些问题。

Windows PATH

对于使用旧版本 Sencha Cmd 的 Windows 用户，PATH 更改的副作用是您不会在 PATH 的前面看到新版本的“sencha”。这是预期的行为。要管理您的 PATH，请使用控制面板

要更改用户或系统的 PATH，请在此对话框中找到条目

系统 PATH 字符串将出现在用户 PATH 字符串之前，在 PATH 环境变量的最终值中。以前版本的 Sencha Cmd 安装在系统 PATH 中，因此它们将“隐藏”新版本。

Mac OS X / Linux

在非 Windows 平台上，安装程序现在仅通过修改 ~/.bash_profile 向 PATH 添加一个位置

export PATH=~/bin/Sencha/Cmd:$PATH

在以前的安装程序中，您可能会找到多个条目，例如这些

export PATH=~/bin/Sencha/Cmd/5.1.1.39:$PATH

export PATH=~/bin/Sencha/Cmd/5.1.2.52:$PATH

export PATH=~/bin/Sencha/Cmd/5.1.3.61:$PATH

新安装程序现在维护指向最新安装版本的符号链接“~/bin/Sencha/Cmd/sencha”。

迁移过程

开始之前

全新开始

迁移过程的第一步是确保您的源代码控制系统中没有待处理的更改。不建议在您有其他正在进行的更改时开始升级。这将使您可以更轻松地查看 Sencha Cmd 所做的更改，从而确保您所做的任何自定义仍然有效。

安装合并工具（推荐）

在升级期间，Sencha Cmd 可能需要对您也可能已编辑的一些文件应用更改。与任何此类情况一样，您有可能编辑了 Sencha Cmd 需要更新的同一行，从而造成合并冲突。

好消息是，与版本控制一样，有一些工具可以帮助解决这些合并冲突。Sencha Cmd 可以利用您可以从命令行运行的任何可视化合并工具（几乎所有工具都是如此）。此步骤是可选的，但强烈建议使用，因为它将使处理升级变得更加简单。

以下是一些流行的选择列表（有些是免费的，有些是商业的）

• p4merge
• SourceGear
• kdiff3
• Syntevo SmartSynchronize 3
• TortoiseMerge - （TortoiseSVN 的一部分）
• AraxisMerge

我们将在下一步中配置 Sencha Cmd 以使用您首选的合并工具。

升级 Sencha Cmd

接下来，您需要获取最新版本的 Sencha Cmd 6。您可以从 Sencha 网站 下载 Sencha Cmd 6。

安装 Sencha Cmd 并重启您的终端。如果您有旧版本的 Sencha Cmd，您可能需要更正您的 PATH（请参阅上文）。

注意： 如果您安装了以前版本的 Cmd，则此版本不会替换它，但在运行 Cmd 软件时，它将优先。有关详细信息，请参阅上文。

配置合并工具

如果您选择获取合并工具，我们需要配置 Sencha Cmd 以使用该合并工具。为此，您需要在配置文件中添加两个属性

cmd.merge.tool
cmd.merge.tool.args

我们可以在 Sencha Cmd 安装文件夹中的 "sencha.cfg" 文件中设置这些属性。或者，可以以版本独立的方式设置这两个属性，以便您的首选项应用于所有版本的 Sencha Cmd。有关详细信息，请参阅 "sencha.cfg" 文件的末尾。

应用升级

我们已准备好开始升级。只需从应用程序的根文件夹运行此命令即可开始

sencha app upgrade path/to/ext6

您应该看到非常少的绿色文本，让您知道您的应用程序已成功升级。

如果您是从 Ext JS 4.x 升级，您应该查阅 Sencha Cmd 5 升级指南 的 Microloader 和 Build Properties 部分。同样，如果您正在使用 Cordova 或 PhoneGap，您也应该检查这些部分。

检查点

一旦应用程序升级完成，并且您已解决可能已报告的任何合并冲突，现在可能是查看源代码控制中差异的好时机。如果一切看起来都不错，那么提交更改并回到全新状态会很好。

清理和构建

下一步是从应用程序根文件夹运行快速构建

sencha app build --clean development

请注意，--clean 开关将删除构建输出文件夹中的所有文件。这将确保没有以前构建的剩余文件，但为了安全起见，我们希望确保在继续之前提交所有更改。

您可能需要做更多的工作才能使应用程序可构建，特别是如果您来自 Sencha Touch。如果是这样，上面将显示构建错误。一旦所有构建错误得到纠正，构建命令将成功。

检查点

一旦所有构建错误都已解决，就该提交更改了。Cmd 升级阶段已完成。由于框架升级，可能需要进行更多更改，但最好从可构建的应用程序开始进行这些更改。

Watch

要使用 Sencha Fashion（我们的新主题编译器）实现的新 Live Update 功能，应用程序必须由 app watch 托管。

使用 watch，您现在可以在您自己的 Web 服务器的 localhost 上或在 https://127.0.0.1:1841 上查看应用程序，这是我们为您自动启动的服务器。Web 服务器现在是 app watch 的默认组成部分。在 Sencha Cmd 5 之前，您必须单独运行 sencha web start 才能使用 Sencha Cmd Web 服务器。您可以使用以下属性调整 Web 服务器配置（显示了它们的默认值）

build.web.port=1841
build.web.root=${workspace.dir}

应用程序更新

当使用 Sencha Cmd 生成 Ext JS 6 应用程序时，以下命令将生成通用应用程序（一个同时使用 classic 和 modern 工具包的应用程序）

sencha -sdk path/to/ext6 generate app YourAppName ./AppFolder

要为 Ext JS 6 生成仅 classic 工具包的应用程序，请添加 --classic

sencha -sdk path/to/ext6 generate app --classic YourAppName ./AppFolder

类似地，对于仅 modern 工具包的应用程序

sencha -sdk path/to/ext6 generate app --modern YourAppName ./AppFolder

app.json

为 Ext JS 6 生成的应用程序具有更完整的 app.json 文件。标准 app.json 文件的某些部分可能需要合并到现有应用程序的 app.json 文件中。

“sass”对象

此对象包含控制样式编译的属性。以下片段是在新生成的应用程序中将提供的片段。如果您的 app.json 没有“sass”对象，您可能只需直接粘贴以下内容即可。

/**
 * Sass configuration properties.
 */
"sass": {
    /**
     * The root namespace to use when mapping *.scss files to classes in the
     * sass/src and sass/var directories. For example, "App.view.Foo" would
     * map to "sass/src/view/Foo.scss". If we changed this to "App.view" then
     * it would map to "sass/src/Foo.scss". To style classes outside the app's
     * root namespace, change this to "". Doing so would change the mapping of
     * "App.view.Foo" to "sass/src/App/view/Foo.scss".
     */
    "namespace": "App",

    /**
     * Comma-separated list of files or folders containing extra Sass. These
     * files are automatically included in the Sass compilation. By default this
     * is just "etc/all.scss" to allow import directives to control the order
     * other files are included.
     *
     * All "etc" files are included at the top of the Sass compilation in their
     * dependency order:
     *
     *      +-------+---------+
     *      |       | base    |
     *      | theme +---------+
     *      |       | derived |
     *      +-------+---------+
     *      | packages        |  (in package dependency order)
     *      +-----------------+
     *      | application     |
     *      +-----------------+
     */
    "etc": [
        "sass/etc/all.scss",
        "${toolkit.name}/sass/etc/all.scss"
    ],

    /**
     * Comma-separated list of folders containing Sass variable definitions
     * files. These file can also define Sass mixins for use by components.
     *
     * All "var" files are included after "etc" files in the Sass compilation in
     * dependency order:
     *
     *      +-------+---------+
     *      |       | base    |
     *      | theme +---------+
     *      |       | derived |
     *      +-------+---------+
     *      | packages        |  (in package dependency order)
     *      +-----------------+
     *      | application     |
     *      +-----------------+
     *
     * The "sass/var/all.scss" file is always included at the start of the var
     * block before any files associated with JavaScript classes.
     */
    "var": [
        "sass/var/all.scss",
        "sass/var",
        "${toolkit.name}/sass/var"
    ],

    /**
     * Comma-separated list of folders containing Sass rule files.
     *
     * All "src" files are included after "var" files in the Sass compilation in
     * dependency order (the same order as "etc"):
     *
     *      +-------+---------+
     *      |       | base    |
     *      | theme +---------+
     *      |       | derived |
     *      +-------+---------+
     *      | packages        |  (in package dependency order)
     *      +-----------------+
     *      | application     |
     *      +-----------------+
     */
    "src": [
        "sass/src",
        "${toolkit.name}/sass/src"
    ],

    /**
     * File used to save sass variables edited via Sencha Inspector. This file
     * content will override all other variables.
     */
    // "save": "sass/save.scss"
},

以上属性将替换可能已添加到 ".sencha/app/sencha.cfg" 文件中的“app.sass.*”属性。

即使 Fashion 实际上不是 Sass 的实现，我们仍然在此上下文中保留了术语“sass”，因为它历来是这些路径设置的名称。

“css”数组

以前，应用程序具有以下任一项（来自 Ext JS 5 或 Sencha Con EA 版本）

{
    "path": "bootstrap.css",
    "bootstrap": true
},

{
    "path": "${build.out.css.path}"
    "bundle": true
}

该值应改为

{
    "path": "${build.out.css.path}"
    "bundle": true,
    "exclude": ["fashion"]
}

我们添加的 exclude 属性确保如果我们启用 Fashion，则跳过 CSS 文件，因为它将从 .scss 源构建 CSS。

工作区更新

使用 Sencha Cmd 6，现在在工作区根文件夹中添加了一个 workspace.json 文件。虽然此文件将在需要时生成，但在升级期间关注它将是有益的。

workspace.json

默认情况下，该文件看起来像这样

{
    /**
     * An array of the paths to all the applications present in
     * this workspace
     */
    "apps": [
        "app1"
    ],

    /**
     * This is the folder for build outputs in the workspace.
     */
    "build": {
        "dir": "${workspace.dir}/build"
    },

    /**
     * These configs determine where packages are generated and
     * extracted to (when downloaded).
     */
    "packages": {
        /**
         * This folder contains all local packages.
         * If a comma-separated string is used as value the first
         * path will be used as the path to generate new packages.
         */
        "dir": "${workspace.dir}/packages/local,${workspace.dir}/packages",

        /**
         * This folder contains all extracted (remote) packages.
         */
        "extract": "${workspace.dir}/packages/remote"
    }
}

“apps”数组包含工作区中 Sencha Cmd 应用程序的相对路径。此列表由 sencha generate app 维护，但删除或重新定位应用程序将需要手动维护此数组。以前生成的应用程序也需要手动添加。Sencha Cmd 当前不需要此数组，但对于未来的工具有效地查看工作区中的应用程序列表而言，此数组将很重要。

Sencha Space 更新

“Sencha Space”已重命名为“Sencha Web Application Manager”。如果您将 Sencha Space 与 Sencha Cmd 集成，则需要将 app.json 的“space”对象更改为“manager”。