refactor: 插件处理静态文件 & 尝试按需加载 (#6)

* refactor: 引入 koa-static 加载静态文件 & 初始化详情页 * fix: 无法读取 chunk * style: 修改代码格式
orzyyyy · Jan 28, 2019 · 16b3659 · 16b3659
1 parent dd9ca83
commit 16b3659
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 189 deletions.
diff --git a/dist/assets/mapping.css b/dist/assets/mapping.css
@@ -0,0 +1 @@
+.mapping {}
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="ninoninoni.js?64108e74e976f71f2a1e"></script></body></html>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><link rel="shortcut icon" href="dist/assets/favicon.ico" type="image/x-icon"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>*{margin:0;padding:0}</style></head><body><div id="root"></div><script type="text/javascript" src="ninoninoni.js?23651c9bd998f1687b7d"></script></body></html>
diff --git a/dist/lib/main/assets/mapping.css b/dist/lib/main/assets/mapping.css
@@ -0,0 +1 @@
+.mapping {}
diff --git a/dist/mapping.json b/dist/mapping.json
@@ -1 +1 @@
-[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548570013470,"modifyTime":1548570013470},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548570013470,"modifyTime":1548570013470}]
+[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548578388069,"modifyTime":1548578388069},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548578388069,"modifyTime":1548578388069}]
diff --git a/dist/ninoninoni.js b/dist/ninoninoni.js
diff --git a/dist/vendor/1.js b/dist/vendor/1.js
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
   "dependencies": {
     "koa": "^2.6.2",
     "koa-bodyparser": "^4.2.1",
+    "koa-static": "^5.0.0",
     "koa-router": "^7.4.0"
   },
   "devDependencies": {

diff --git a/server/index.js b/server/index.js
@@ -3,15 +3,8 @@ const app = new Koa();
 const router = require('koa-router')();
 const bodyParser = require('koa-bodyparser');
 const fs = require('fs');
+const KoaStatic = require('koa-static');
 const path = require('path');
-const content = require('./util/content');
-const mimes = require('./util/mimes');
-
-const parseMime = url => {
-  let extName = path.extname(url);
-  extName = extName ? extName.slice(1) : 'unknown';
-  return mimes[extName];
-};
 
 const addMapping = (router, mapping) => {
   for (let url in mapping) {
@@ -43,23 +36,8 @@ addControllers(router);
 app.use(bodyParser());
 app.use(router.routes());
 
-app.use(async ctx => {
-  const fullStaticPath = path.join(process.cwd());
-  const contentIns = await content(ctx, fullStaticPath);
-  const mime = parseMime(ctx.url);
-
-  if (mime) {
-    ctx.type = mime;
-  }
-
-  if (mime && mime.indexOf('image/') >= 0) {
-    ctx.res.writeHead(200);
-    ctx.res.write(contentIns, 'binary');
-    ctx.res.end();
-  } else {
-    ctx.body = contentIns;
-  }
-});
+app.use(KoaStatic(process.cwd()));
+app.use(KoaStatic(path.join(process.cwd(), 'dist')));
 
 app.listen(9099);
 // eslint-disable-next-line

diff --git a/server/util/content.js b/server/util/content.js
diff --git a/server/util/dir.js b/server/util/dir.js
diff --git a/server/util/file.js b/server/util/file.js
diff --git a/server/util/mimes.js b/server/util/mimes.js
diff --git a/server/util/walk.js b/server/util/walk.js
diff --git a/src/assets/mapping.css b/src/assets/mapping.css
@@ -0,0 +1 @@
+.mapping {}
diff --git a/src/mapping.json b/src/mapping.json
@@ -1 +1 @@
-[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548570013470,"modifyTime":1548570013470},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548570013470,"modifyTime":1548570013470}]
+[{"id":"1a79a4d60de6718e8e5b326e338ae533","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae533.json","createTime":1548578388069,"modifyTime":1548578388069},{"id":"1a79a4d60de6718e8e5b326e338ae534","title":"test1","thumbnailUrl":"dist/assets/5795774_0.jpg","hoverText":"测试 layout-1a79a4d60de6718e8e5b326e338ae534.json","createTime":1548578388069,"modifyTime":1548578388069}]
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import '../assets/MainPage.css';
 import { ajax } from '../urlHelper';
 import { Card, Dropdown, Menu } from 'antd';
-import classNames from 'classnames';
 
 export default class MainPage extends Component {
   static propTypes = {};
@@ -14,6 +13,9 @@ export default class MainPage extends Component {
 
     this.state = {
       data: [],
+      status: 'main', // main => MainPage, detail => mapping
+      Detail: null,
+      mappingId: '',
     };
   }
 
@@ -25,34 +27,46 @@ export default class MainPage extends Component {
   };
 
   handleClick = ({ id }) => {
-    // eslint-disable-next-line
-    console.log(id);
+    import('./mapping').then(target => {
+      this.setState({
+        Detail: target.default,
+        status: 'detail',
+        mappingId: id,
+      });
+    });
   };
 
-  render = () => {
+  generateMainPage = () => {
     const { data } = this.state;
     const menu = (
       <Menu>
         <Menu.Item key="1">修改</Menu.Item>
         <Menu.Item key="2">删除</Menu.Item>
       </Menu>
     );
+    return data.map(item => {
+      const { thumbnailUrl, id, hoverText } = item;
+      return (
+        <Card.Grid className="card" key={id}>
+          <Dropdown overlay={menu} trigger={['contextMenu']}>
+            <img src={thumbnailUrl} onClick={() => this.handleClick(item)} />
+          </Dropdown>
+        </Card.Grid>
+      );
+    });
+  };
 
+  generateDetail = () => {
+    const { Detail, mappingId } = this.state;
+    return Detail && <Detail id={mappingId} />;
+  };
+
+  render = () => {
+    const { status } = this.state;
     return (
       <div className="MainPage">
-        {data.map(item => {
-          const { thumbnailUrl, id, hoverText } = item;
-          return (
-            <Card.Grid className="card" key={id}>
-              <Dropdown overlay={menu} trigger={['contextMenu']}>
-                <img
-                  src={thumbnailUrl}
-                  onClick={() => this.handleClick(item)}
-                />
-              </Dropdown>
-            </Card.Grid>
-          );
-        })}
+        {status === 'main' && this.generateMainPage()}
+        {status === 'detail' && this.generateDetail()}
       </div>
     );
   };

diff --git a/src/pages/mapping.js b/src/pages/mapping.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+import '../assets/mapping.css';
+
+export default class mapping extends Component {
+  static propTypes = {};
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  componentDidMount = () => {
+    // eslint-disable-next-line
+    console.log(this.props.id);
+  };
+
+  render = () => {
+    return <div className="mapping">mapping</div>;
+  };
+}