From 4ebb6732ba0d09970ce9967a6b2c509b97eb6845 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=A7=E6=9E=9C?= Date: Sat, 19 Oct 2019 15:32:25 +0800 Subject: [PATCH] docs: remove chinese docs and redirect to website (#20) --- README.md | 27 ++++---- README.zh-CN.md | 168 ------------------------------------------------ 2 files changed, 11 insertions(+), 184 deletions(-) delete mode 100644 README.zh-CN.md diff --git a/README.md b/README.md index 57cc2d63..876fb42d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -English | [简体中文](./README.zh-CN.md) +English | [简体中文](https://ice.work/docs/icestark/about) # icestark -> Micro Frontends solution for large application. [Docs](https://ice.work/docs/icestark/about). +> Micro Frontends solution for large application. [Website docs](https://ice.work/docs/icestark/about). [![NPM version](https://img.shields.io/npm/v/@ice/stark.svg?style=flat)](https://npmjs.org/package/@ice/stark) [![Package Quality](https://npm.packagequality.com/shield/@ice%2Fstark.svg)](https://packagequality.com/#?package=@ice%2Fstark) [![build status](https://img.shields.io/travis/ice-lab/icestark.svg?style=flat-square)](https://travis-ci.org/ice-lab/icestark) [![Test coverage](https://img.shields.io/codecov/c/github/ice-lab/icestark.svg?style=flat-square)](https://codecov.io/gh/ice-lab/icestark) [![NPM downloads](http://img.shields.io/npm/dm/@ice/stark.svg?style=flat)](https://npmjs.org/package/@ice/stark) [![David deps](https://img.shields.io/david/ice-lab/icestark.svg?style=flat-square)](https://david-dm.org/ice-lab/icestark) @@ -39,7 +39,7 @@ npm install @ice/stark --save ### Framework Application ```javascript -// src/index.js +// src/App.jsx import React from 'react'; import ReactDOM from 'react-dom'; import { AppRouter, AppRoute } from '@ice/stark'; @@ -59,22 +59,21 @@ class App extends React.Component { NotFoundComponent={
NotFound
} > @@ -150,10 +149,6 @@ export default class App extends React.Component { } ``` -## API - -[See the doc](https://ice.work/docs/icestark/api/app-router). - ## Todos - [ ] Possible js pollution problem between sub-applications diff --git a/README.zh-CN.md b/README.zh-CN.md deleted file mode 100644 index 49f8c2b2..00000000 --- a/README.zh-CN.md +++ /dev/null @@ -1,168 +0,0 @@ -[English](./README.md) | 简体中文 - -# icestark - -> 面向大型应用的微前端解决方案。[文档](https://ice.work/docs/icestark/about)。 - -[![NPM version](https://img.shields.io/npm/v/@ice/stark.svg?style=flat)](https://npmjs.org/package/@ice/stark) [![Package Quality](https://npm.packagequality.com/shield/@ice%2Fstark.svg)](https://packagequality.com/#?package=@ice%2Fstark) [![build status](https://img.shields.io/travis/ice-lab/icestark.svg?style=flat-square)](https://travis-ci.org/ice-lab/icestark) [![Test coverage](https://img.shields.io/codecov/c/github/ice-lab/icestark.svg?style=flat-square)](https://codecov.io/gh/ice-lab/icestark) [![NPM downloads](http://img.shields.io/npm/dm/@ice/stark.svg?style=flat)](https://npmjs.org/package/@ice/stark) [![David deps](https://img.shields.io/david/ice-lab/icestark.svg?style=flat-square)](https://david-dm.org/ice-lab/icestark) - -## 安装 - -```bash -npm install @ice/stark --save -``` - -## 简介 - -`icestark` 是面向大型应用的微前端解决方案，包含以下特性： - -- 基于路由，模块化管理多个独立应用 -- 不同应用独立仓库、独立开发与部署 -- 统一管理页面公共内容（Common Header、Common Sidebar 等） -- 支持应用低成本迁移 -- SPA 用户体验 - -### 应用架构 - -![应用架构](https://img.alicdn.com/tfs/TB1bvbieEY1gK0jSZFMXXaWcVXa-1421-1416.png) - -- 按照 UI 结构进行框架应用、子应用的拆分 -- 框架应用：负责子应用的注册、加载，公共内容展示（Common Header、Common Sidebar、Common Footer 等） -- 子应用：负责自身业务相关的内容展示 - -### 兼容性 - -`icestark` 要求框架应用使用 react 版本 15+，对子应用的技术栈没有限制，支持 react、vue、angular 等不同技术栈，也支持同一技术栈的多版本共存 - -## 快速开始 - -### 框架应用 - -```javascript -// src/index.js -import React from 'react'; -import ReactDOM from 'react-dom'; -import { AppRouter, AppRoute } from '@ice/stark'; - -class App extends React.Component { - onRouteChange = (pathname, query) => { - console.log(pathname, query); - }; - - render() { - return ( -
-
this is common header
- js bundle loaded error
} - NotFoundComponent={
NotFound
} - > - - - -
this is common footer
- - ); - } -} - -ReactDOM.render( - , - document.getElementById('ice-container') -); -``` - -- `AppRouter` 定位子应用渲染节点 -- `AppRoute` 设置子应用相关配置，`path` 配置有效路由信息、`basename` 配置统一的路由前缀，`url` 配置静态资源路径 -- `icestark` 会按照类似 `react-router` 的路由解析规则，判断当前生效 `path`，加载对应子应用的静态资源，进行渲染 - -### 子应用 - -- 通过 `getMountNode` 获取渲染 `DOM` 节点 -- 手动触发子应用 `unmount` 事件 - -```javascript -// src/index.js -import ReactDOM from 'react-dom'; -import { getMountNode, registerAppLeave } from '@ice/stark-app'; -import router from './router'; - -// make sure the unmount event is triggered -registerAppLeave(() => { - ReactDOM.unmountComponentAtNode(getMountNode()); -}); - -ReactDOM.render(router(), getMountNode()); -``` - -- 子应用通过 `getBasename` 获取框架应用中配置的 `basename` -- `renderNotFound` 触发框架应用渲染 404 - -```javascript -// src/router.js -import React from 'react'; -import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; -import { renderNotFound, getBasename } from '@ice/stark-app'; - -function List() { - return
List
; -} - -function Detail() { - return
Detail
; -} - -export default class App extends React.Component { - render() { - return ( - - - - - - { - return renderNotFound(); - }} - /> - - - ); - } -} -``` - -## API - -[查看完整文档](https://ice.work/docs/icestark/api/app-router). - -## Todos - -- [ ] 子应用之间可能的 js 污染问题 -- [ ] 框架应用和子应用之间可能的样式污染问题 - -## Contributors - -欢迎反馈问题 [issue 链接](https://github.com/alibaba/ice/issues/new) 如果对 `icestark` 感兴趣，欢迎参考 [CONTRIBUTING.md](https://github.com/alibaba/ice/blob/master/.github/CONTRIBUTING.md) 学习如何贡献代码。 - -## License - -[MIT](LICENSE)