Needle2.x升级指南

2.x有哪些不兼容的地方

入口文件的调整

在Needle2.x之后, 我们采用插件的模式对底层架构进行业务逻辑的拆分。通过Core.plugin() 的方式, 将插件注入到Core中。

  // ...
  import pluginLayout from '@hvisions/plugin-default-layout';
  import pluginLogin from '@hvisions/plugin-default-login';
  import pluginBorder from '@hvisions/plugin-default-border';
  import pluginSysLogin from '@hvisions/plugin-default-syslogin';
  import noAuthPlugin from '@hvisions/plugin-default-noauth';
  // ...
  Core.plugin(pluginLayout);
  Core.plugin(pluginLogin);
  Core.plugin(pluginBorder);
  Core.plugin(pluginSysLogin);
  Core.plugin(noAuthPlugin);

  // ...

全局配置文件

在Needle2.x之前, 我们采用构造函数传参的方式, 修改产品logo, 描述等等。在新的架构中, 我们新增了.needlerc.js文件用于定义 Needle 下各个模块、插件、UI的配置。

.npmrc的修改

新的架构依然可以采用block模式进行业务的开发。block核心包与产品每个业务模块包区别比较大, 它是属于社区的产物, 因此我们将block核心包的命名统一以@needle开头。我们需要指定所有以
@needle开头的包都去https://registry.hipermatic.com/ 上下载。

@needle:registry=https://registry.hipermatic.com/

核心依赖的升级

以下依赖包必须升级到2.x以上的版本

-  @hvisions/core
-  @hvisions/needle-service
-  @hvisions/plugin-default-border
-  @hvisions/plugin-default-layout
-  @hvisions/plugin-default-login
-  @hvisions/toolkit

详情页的升级

在某些需要缓存页面详情页的业务中, 你可能用到了withDetail 这个高阶组件, 他负责协助我们自动开启Tab, 当我们执行内置的
goBack方法时, 他会自动关闭Tab页。

在之前的页面中的代码可能是这样的：

import React, { Component } from 'react';
import { Button, Input } from "@hvisions/h-ui";
import { withDetail } from '@hvisions/core';

class DetailComponent extends Component {
  render() {
    const { history, goBack, match  } = this.props;
    console.log(history.location);
    return (
      <div>
        <Button onClick={() => goBack()}>返回</Button>
      </div>
    );
  }
}

export default withDetail(DetailComponent, '/user');

withDetail的第二个参数表示返回时跳转的页面。但是有些场景需要通过逻辑判断得出返回的页面url。那么我们可以通过 goBack 指定跳转的页面。比如 goBack('/user')。
如果你还有更多的场景, 可以通过意见反馈告诉我们。

开始升级

你可以手动对照上面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 @needle/codemod 以帮助你快速升级到 needle2.x 版本。

全局安装cli工具

npm install @needle/codemod -g --registry https://registry.hipermatic.com

如果出现401, 那么你需要重新执行npm adduser --registry https://registry.hipermatic.com

在项目根目录运行

needle-codemod

重新安装依赖

npm install / yarn

对于无法自动修改的部分，codemod 会在命令行进行提示，建议按提示手动修改。修改后可以反复运行上述命令进行检查。

遇到问题

如果你在升级的过程中遇到了问题。可以通过意见反馈告诉我们。我们会尽快响应和相应改进这篇文档。