Todos #2

Mesamo · 2017-08-17T05:39:00Z

bundle提取公用模块
Testing Framework
Progressive Web App
more to do...

Mesamo · 2017-08-23T16:30:45Z

bundle提取公用模块

在src目录添加vendor.js, 把一些公用的模块都引用下

import 'react'
import 'react-dom'
import 'react-router'
import 'core-js'
import 'rc-queue-anim';
import 'prop-types'
import 'path-to-regexp'
import 'dva'
import 'dva-loading'
import 'firebase/app'
import 'firebase/auth'
import 'firebase/database'

import antd from 'antd'

/* eslint-disable */
const { Table, Form, Layout, Row, Col, Menu, Dropdown, Popover, Input, Button, Checkbox,
  Card, Icon, Progress, Alert, Switch, Radio, Modal, message, notification
} = antd
/* eslint-disable */

修改.roadhogrc

{
- "entry": "./src/index.js",
+ "entry": {
+   "index": "./src/index.js",
+   "common": "./src/vendor.js"
+ },
+ "multipage": true,
    ....
    ....
}

Mesamo · 2017-08-24T01:34:54Z

Progressive Web App

安装sw-precache

$ npm install sw-precache --save-dev

根目录添加sw-precache-config.js

+module.exports = {
+  stripPrefix: 'dist/',
+  staticFileGlobs: [
+    'dist/favicon.ico',
+    'dist/manifest.json',
+    'dist/index.html',
+    'dist/assets/**/*',
+    'dist/static/*',
+    'dist/*.js',
+    'dist/*.css'
+  ],
+  dontCacheBustUrlsMatching: /\.\w{8}\./,
+  swFilePath: 'dist/service-worker.js'
+};

将静态文件和不常变动的第三方模块加入cache storage

修改构建脚本

{
    ...
    "scripts": {
      "start": "roadhog server",
-     "build": "roadhog build",
+     "build": "roadhog build && sw-precache --config=sw-precache-config.js",
      "analyze": "roadhog build --analyze",
      "lint": "eslint --ext .js src test",
      "precommit": "npm run lint"
    }
    ...
}

修改index.ejs，注册service worker

<body>
  <div id="root">loading</div>
+ <script>
+    if ('serviceWorker' in navigator) {
+     navigator.serviceWorker.register('/service-worker.js');
+   }
+ </script>
</body>

public目录下添加manifest.json

{
  "name": "Dva Admin -- Mesamo",
  "short_name": "Dva Admin",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#8fc9fb",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "400x400",
      "type": "image/png"
    }
  ]
}

Your First Progressive Web App

LuciferLi · 2017-09-07T07:37:54Z

不是npm install sw-pecache --save-dev，是npm install sw-percache --save-dev

Mesamo · 2017-09-07T14:36:45Z

@LuciferLi 已修改，谢谢

syaivin · 2018-03-10T05:41:22Z

@Mesamo 没有测试账号密码吗？

Mesamo · 2018-03-11T14:06:21Z

@syaivin 登录功能使用的是firebase的服务，可以直接注册(需要科学上网)。

Mesamo changed the title ~~TODO~~ Todos Aug 18, 2017

Mesamo self-assigned this Aug 18, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Todos #2

Todos #2

Mesamo commented Aug 17, 2017 •

edited

Loading

Mesamo commented Aug 23, 2017 •

edited

Loading

Mesamo commented Aug 24, 2017 •

edited

Loading

LuciferLi commented Sep 7, 2017

Mesamo commented Sep 7, 2017

syaivin commented Mar 10, 2018 •

edited

Loading

Mesamo commented Mar 11, 2018

Todos #2

Todos #2

Comments

Mesamo commented Aug 17, 2017 • edited Loading

Mesamo commented Aug 23, 2017 • edited Loading

bundle提取公用模块

Mesamo commented Aug 24, 2017 • edited Loading

Progressive Web App

LuciferLi commented Sep 7, 2017

Mesamo commented Sep 7, 2017

syaivin commented Mar 10, 2018 • edited Loading

Mesamo commented Mar 11, 2018

Mesamo commented Aug 17, 2017 •

edited

Loading

Mesamo commented Aug 23, 2017 •

edited

Loading

Mesamo commented Aug 24, 2017 •

edited

Loading

syaivin commented Mar 10, 2018 •

edited

Loading