@uyun/everest-redevelop
1. 提供业务组件/功能 2. 做二次开发
Last updated 8 years ago by liupeng . 
$ cnpm install @uyun/everest-redevelop
Private package

使用场景一

1.  提供业务组件/功能
2.  做二次开发

提供方提供业务组件/功能：

  1. 进入src目录，创建 redevelop.index.js，该文件用于导出模块接口供外部使用，格式可参考以下代码：

    export { default as Hostmap } from './app/host-map'

  2. 进入项目根目录，构建二次开发包

    • 如果之前没有everest的构建工具或已存的everest的版本过旧，执行everest redevelop -c命令。其中-c的作用是将everest的最新构建工具打包到二次开发包中。如果只是提供或更新二次开发包，执行everest redevelop命令即可。

  3. 执行上述命令后，将在项目目录下创建 redevelop-项目名称 的文件夹，以redevelop-monitor为例。进入redevelop-monitor目录后，可测试二次开发的包的导出和引入功能，测试命令执行流程参考如下：

    • cd redevelop-monitor 进入开发包所在目录
    • npm i 安装依赖
    • everest redevelop --install ../redevelop-monitor 将../redevelop-monitor路径下的开发包打包进根目录下node_modules/@uyun文件夹中并安装开发包所需依赖。
    • everest start 测试能否正常运行

使用方进行二次开发

  • 如果使用方没有everest-cli 构建工具

    1. 将redevelop-monitor作为二次开发项目目录。备份原始数据，方便以后升级。

    2. 安装构建工具 everest-cli

      • cd redevelop-monitor/everest-tools
      • npm i 安装包依赖
      • npm run everest-link 把构建工具链接到全局
      • everest -v 查看是否安装成功

    3. 进行二次开发

      • cd redevelop-monitor
      • npm i 安装包依赖
      • everest redevelop -i ../redevelop-monitor(../redevelop-monitor是开发包的所在路径)
        • 把提供的包redevelop-monitor，装载到redevelop-monitor/node_modules/@uyun目录下 -everest start

  • 如果有 everest-cli，构建工具（必须是最新的），但没有项目目录

    • 进行 1，3 步骤

  • 要升级monitor的二次开发包， 或添加二次开发包,比如升级的包放在D盘下（路径为：d:/redevelop-monitor-new）

    • 在升级前的根目录下，执行命令 everest redevelop -i ../redevelop-monitor-new 将覆盖原来的包 (../redevelop-monitor-new是最新的开发包或引入的其他开发包的存放路径)

使用场景二

  1. 提供者项目模块全部保留，然后做添加或修改模块

接下来看一个例子:

1. 初始化项目，everest init my-project。 选择uyun-web-template 优云web端模板， 作为提供者项目

2. cd my-project, 在根目录src下创建 redevelop.index.js 作为提供组件的入口文件， 代码如下:

export { Index, Layout, User, Todo, DetailUser } from './routes/index'

3. everest redevelop 打包提供包

4. 测试提供的包

$ cd redevelop-my-project
$ npm i
$ everest redevelop -i ../redevelop-my-project
$ everest start

以上步骤解释参照上面场景一

5. 添加代码打开 redevelop-my-project/src/router.js


import React, {Component, PureComponent } from 'react'
import { HashRouter, Redirect, Route, Switch } from 'react-router-dom'
import * as devs from '@uyun/redevelop-my-project'
import '@uyun/redevelop-my-project/dist/my-project.css'

//新添加的组件
class NewAdd extends React.PureComponent {
  render() {
    return <h1>我是新添加的</h1>
  }
}

export default class Bootstrap extends React.PureComponent {
  render () {
    return (
      <div>
        <HashRouter>
          <Switch>
            <Redirect exact from='/' to='/index' />
            {
              Object.values(devs).map((Cpt, i) => (
                  Component.isPrototypeOf(Cpt) || PureComponent.isPrototypeOf(Cpt)
                ) && <Route key={Cpt.name} exact path={`/${i === 0 ? 'index' : Cpt.name}`} component={Cpt} />
              )
            }
            /**
             * 新添加的
             */
            <Route exact path='/new-add' component={NewAdd} />
          </Switch>
        </HashRouter>
      </div>
    )
  }
}

6. 添加代码打开 redevelop-my-project/public/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>uyun demo</title>
    <link rel="icon" href="/tenant/styles/images/title-logo.png" >
    <link rel="stylesheet" type="text/css" href="/frontend/Layout-public.min.css">
    <link rel="stylesheet" type="text/css" href="/static/fonts/project/iconfont.css">
</head>
<body>
    <div id="layout-content" class="local-content"></div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/frontend/Layout-public.min.js"></script>
    <script>
        Layout.init(1014);
        Layout.I18n({
            zh_CN: './static/locales/zh_CN.json',
            en_US: './static/locales/en_US.json'
        });

        Layout.createNavigation({
            "items": [
                {
                  "title": $.translate('INDEX'),
                  "route": "/index",
                  "icon": "iconfont icon-zonglan"
                },
                {
                  "title": $.translate('USER'),
                  "route": "/user",
                  "icon": "iconfont icon-yonghu"
                },
                {
                  "title": $.translate('TODO'),
                  "route": "/todo",
                  "icon": "iconfont  icon-liebiaolan"
                },
                {
                  "title": "新添加的",
                  "route": "/new-add",
                  "icon": "iconfont  icon-liebiaolan"
                }
            ]
        });
    </script>
</body>
</html>

7. 把代码发给使用者， 使用者步骤参照场景一

使用场景三

使用者可以通过配置的形式去修改页面（不需要二次打包）

提供者如何提供配置给使用者

  1. 在提供者的项目中安装依赖， unpm install --save @uyun/everest-redevelop
  2. 在提供者的项目中找到使用者想要修改的组件， 加上修饰器 @Redevelop(), 实例代码如下：
import { Redevelop } from '@uyun/everest-redevelop'
/**
 * 修饰器 @Redevelop 意义
 * 是将组件的 props 中所有的属性提供给使用者
 */
@Redevelop()
export default class Demo extends PureComponent {
  static defaultProps = {
    title: [1, 2, 3, 5]
  }
  render () {
    return (
      <div style={{ position: 'absolute' }}>
        { this.props.title.map( t => <li key={t}>{t}</li>) }
        <Demo2 />
      </div>
    )
  }
}
  1. 在提供者 项目中public文件下创建 redevelop/index.js 作为使用者配置。
    • 提供者在public/redevelop/index.js去测试
    • 提供者执行 everest build 打包后将redevelop/index.js拷贝build中，使用者在build/redevelop/index.js去配置页面，
    • redevelop/index.js 实例代码如下：
//redevelopDebug 0 关闭debug模式 | 1 开示debug模式 
var redevelopDebug = 1

// redevelopConfig主要用来配置一些静态数据
var redevelopConfig = {
  // Demo 是组件名称
  Demo: {
    tilte: [2, 3]
     // 对应 Demo 组件Props配置
  }
}

/**
 *  getRenderBeforeProps 组件在渲染之前！ 会执行， 主要用来做静态配置
 *  @{dev} 
 *    dev.setProps 设置组件props， 
 *      参数一: Array<组件名称, 组件的key默认 '-', 可以不填> 
 *      参数二： 方法(p: immutable): any { }，必须有返回值
 *  
 */
function getRenderBeforeProps (dev) {
  for (var nameKey in redevelopConfig) {
    dev.setProps(nameKey.split('-'), function (props) {
      return redevelopConfig[nameKey]
    })
  }
}

/**
 *   getRenderAfterProps 组件在渲染之后, 会执行
 *  如果设计的异步添加配置 或者 渲染之后修改配置或追加配置
 *  dev.updateProps 是来更新 组件 props
 *
function getRenderAfterProps (dev) {
  setTimeout(t => {
    dev.updateProps(['Home'], function (props) {
      // props 是一个 immutable, 你可以用来合并， 更新， 修改， 添加 等操作
      return props.merge({
        title: [1111,21212]
      })
    })
  }, 1000)
}
 */

Current Tags

  • 1.0.5                                ...           latest (8 years ago)

5 Versions

  • 1.0.0                                ...           8 years ago
  • 1.0.2                                ...           8 years ago
  • 1.0.3                                ...           8 years ago
  • 1.0.4                                ...           8 years ago
  • 1.0.5                                ...           8 years ago
Maintainers (1)
liupeng
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (31)
Dependents (0)
None

Copyright 2013 - present © cnpmjs.org