旧项目集成新的开发框架（迭代方案）

• 在旧项目去按照新的开发框架去编写代码有以下几个问题
  • 模块版本不统一
  • reflux, redux, mobx的如何共存

• 方案, 选择方案2

  • 1. 修改镜像

  • 2. 安装everest

  • 3. 初始化项目

  • 4. 开发环境目录结构

  • 5. 启动开发环境

  • 6. 打包成npm模块的形式

  • 7. npm 仓库目录结构

  • 8. 上传到npm仓库

  • 9. 集成到旧项目中

方案

• 共同点

  • 需要升级 react， 15以上

• 方案1. 基于旧版本项目里面去做重构。

  • 缺点
    • 需要保持新版跟旧版的模块版本一致，测试量太大。
    • redux 与 mobx 共存数据流混乱
    • 整个项目会变得庞大
    • 维护难道大， 接手难道大
  • 优点
    • 打包方便

• 方案2. 重新创建一个项目用于重构，和开发新模块， 然后把重构的模块导入npm仓库中， 旧项目导入npm仓库中模块

  • 缺点
    • 需要安装依赖模块的第三方模块
    • 打包的时候会麻烦（构建工具优化了这一缺陷）
  • 优点
    • 测试量相对方案一来说要好很多
    • 减轻旧项目压力
    • 模块之间相互独立， 便于维护与接手。

修改镜像

npm install @uyun/unpm -g --registry=http://rnpm.uyundev.cn

安装everest

$ npm i everest -g 

初始化项目

名字必须要@uyun/xxx格式
$ everest init

开发环境目录结构

@uyun/test
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── frontend
│   ├── mock
|   ├── static
│   └── index.html
└── src
    └── app[应用模块]
    │   ├── common[公共组件模块]
    │   │    ├── a-component
    │   │    ├── b-component
    │   │    └── index.js
    │   ├── home[业务模块-1]
    │   │   ├── component
    │   │   ├── store
    │   │   ├── i18n
    │   |   ├── style
    │   │   └── index.js
    │   ├── footer[业务模块-2]
    |   |
    │   └── index.js[入口]
    └── index.js

启动开发环境

$ everest start

打包成npm模块的形式

$ everest compile

npm 仓库目录结构

@uyun/test
├── dist
│   └── app.min.css
│   └── app.min.js
└── lib
│   ├── common[公共组件模块]
│   │   ├── a-component
│   │   ├── b-component
│   │   └── index.js
│   ├── home[业务模块-1]
│   │   ├── component
│   │   ├── store
│   │   ├── i18n
│   │   ├── style
│   │   └── index.js
│   ├── footer[业务模块-2]
│   |
│   └── index.js[入口]
└── package.json
└── README.md

依赖模块检查

// 默认打包的模块依赖是读取package.json中 {  dependencies: {} }
// 可以自定义模块依赖， 需要代码webpack配置覆盖文件
// 查看 打包依赖文件，@uyun/xxx/dist/app.min.js
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("react"), require("immutable"));
    else if(typeof define === 'function' && define.amd)
        define("libs", ["react", "immutable"], factory);
    else if(typeof exports === 'object')
        exports["libs"] = factory(require("react"), require("immutable"));
    else
        root["libs"] = factory(root["react"], root["immutable"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_23__,) ...

依赖模块测试

// 打包成功， 可以把文件拖到本地开发环境下node_modules下面测试一下，
import { XXX } from "@uyun/XXX-app"

ReactDOM.render(
<div>
    <HashRouter>
    <Layout>
        <Switch>
            <Redirect exact from='/' to='/index' />
            <Route exact path='/index' component={XXX} />
        </Switch>
    </Layout>
    </HashRouter>
</div>,
document.getElementById('layout-content')
)

将模块publish到npm仓库中

$  cd @uyun/XXX 
$  npm publish 

集成到旧项目中

$  npm i @uyun/XXX

// 打包成功， 可以把文件拖到本地开发环境下node_modules下面测试一下，
import { XXX } from "@uyun/XXX-app"

    ReactDOM.render(
    <div>
        <HashRouter>
        <Layout>
            <Switch>
                <Redirect exact from='/' to='/index' />
                <Route exact path='/index' component={XXX} />
            </Switch>
        </Layout>
        </HashRouter>
    </div>,
    document.getElementById('layout-content')
    )

Current Tags

• 1.1.1                                ...           latest (8 years ago)

2 Versions

• 1.1.0                                ...           8 years ago
• 1.1.1                                ...           8 years ago