他这意思是 还会去下个chrome吗

$ yarn add -D page-skeleton-webpack-plugin
yarn add v1.3.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
[-/2] ⠁ waiting...
[2/2] ⠁ puppeteer
[-/2] ⠁ waiting...
[-/2] ⠁ waiting...
error D:\studySpace\webpackDemo\webpack_skeleton_01\skeleton_demo\node_modules\puppeteer: Command failed.
Exit code: 1
Command: node install.js
Arguments:
Directory: D:\studySpace\webpackDemo\webpack_skeleton_01\skeleton_demo\node_modules\puppeteer
Output:
ERROR: Failed to download Chromium r564778! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

React版本16+
React使用该项目时，有一些问题：

1. routes只能一个一个加入，添加多个，就无法生成骨架屏
2. 骨架页面预览没有界面显示，只有白屏，代码区也没有代码，也是空白

直接clone项目然后npm install完了之后example里的项目跑不起来，报错
如下：
SkeletonPlugin.prototype.outputSkeletonScreen = async function () { // eslint-disable-line func-names

Description

The page-skeleton-webpack-plugin was installed and configured using the project generated by the @vue/cli 3.0 scaffold, but the skeleton screen could not be generated when the project was run.

使用@vue/cli 3.0脚手架生成的项目，安装并配置了page-skeleton-webpack-plugin，但是在运行项目时无法生成skeleton screen

Steps to reproduce

1. Generate project using vue/cli 3.0
2. Install page-skeleton-webpack-plugin and configure it in vue.config.js
3. Execute npm run serve to run the project
4. Open the console and click on Preview skeleton page
5. An error has occurred 😭 -> "[PSG] generate is not a function"

1. 使用vue/cli 3.0生成项目
2. 安装page-skeleton-webpack-plugin，并在vue.config.js进行相应的配置
3. 执行npm run serve运行项目
4. 打开控制台，点击Preview skeleton page
5. 出现错误😭 -> "[PSG] generate is not a function"

Expected behavior:

Correct generation of skeleton screen.

正确的生成skeleton screen

Actual behavior:

An error message 😭 -> "[PSG] generate is not a function" has occurred and the debug skeleton screen cannot be previewed.

出现了错误提示😭 -> "[PSG] generate is not a function"，无法预览调试skeleton screen

Plugin configration

const path = require('path');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');

module.exports = {
  crossorigin: 'anonymous',
  integrity: true,
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'),
        staticDir: path.resolve(__dirname, './dist'),
        routes: ['/'],
      }),
    ],
  },
};

Versions

• Page Skeleton: 0.10.12
• Webpack: 4.17.1

今天碰到一个问题，就是我本地项目是用express起的，结合page-skeleton-webpack-plugin之后就一直报端口错误，我确信端口是没有冲突的

1. webpack4 的插件写法有改动哈，webpack4不支持
2. 怎么实现multiple-page 骨架，路由配置好像只针对单页应用，能支持类似饿了么webapp这种多页面吗

example下的sale运行 npm run dev 报错 😭 -> "[PSG] Cannot read property 'newPage' of null"
我什么也没改

Description

使用create-react-app 新建的项目，然后尝试了一下，报了Cannot read property 'tapAsync' of undefined 的错误。

还是说，需要什么特别注意的设置？

Description

[Description of the bug or feature]
看了之前关闭的issues，项目组好像有计划将vue 或者 react 组件转化为骨架屏组件，目前有这方面的进展么，特别是react部分的。

Description

[yarn or npm 安装失败]

Steps to reproduce

1. [First step]
2. [Second step]
3. [and so on...]

error /Users/simon/Private/Vue/v-ym-mall/node_modules/puppeteer: Command failed.
Exit code: 1
Command: node install.js
Arguments:
Directory: /Users/simon/Private/Vue/v-ym-mall/node_modules/puppeteer
Output:
ERROR: Failed to download Chromium r588429! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
{ Error: connect ETIMEDOUT 172.217.160.112:443
at Object._errnoException (util.js:992:11)
at _exceptionWithHostPort (util.js:1014:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1186:14)
code: 'ETIMEDOUT',
errno: 'ETIMEDOUT',
syscall: 'connect',
address: '172.217.160.112',

Versions

• Page Skeleton: 最新
• Webpack: 4.0以上

本地没有这个端口号的服务，排除端口号被占用的可能。

vue-cli3创建的项目在生成骨架代码的时候报错,不知道怎么解决。

我执行的是yarn dev，没有任何报错,但是在生成骨架的时候，报错了，以下是报错信息

[19:07:29] i ｢pswp｣: write C:\Users\ecareyu\Projects\demo\js\vue3-spa\dist\index.html successfully in /
[19:07:36] i ｢pswp｣: begin to generator skeleton screen
[19:07:44] i ｢pswp｣: generator skeleton screen successfully
(node:14592) UnhandledPromiseRejectionWarning: Error: spawn cmd ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:362:16)
    at _combinedTickCallback (internal/process/next_tick.js:139:11)
    at process._tickCallback (internal/process/next_tick.js:181:9)
(node:14592) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)ith .catch(). (rejection id: 1)
(node:14592) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Plugin configration

const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')

module.exports = {
  configureWebpack: {
    plugins: [
      // vue-cli3自带html-webpack-plugin，所以我这边没有引入
      // 骨架屏插件
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'),
        staticDir: path.resolve(__dirname, './dist'),
        routes: ['/'],
        port: '7890'
      })
    ]
  }
}

Versions

• Page Skeleton: 0.10.12
• Webpack:4.15.1
• html-webpack-plugin:3.2.0

Description

[Description of the bug or feature]

Steps to reproduce

1. [First step]
2. [Second step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Link to an example: [If you're reporting a bug that's not reproducible, please try to reproduce it on JSFiddle, JS Bin, CodePen or a similar service and paste a link here]

Plugin configration

for example:

new SkeletonPlugin({
  pathname: path.resolve(__dirname, `./src`),
  port: '7890',
  loading: 'spin',
  svg: {
    color: '#EFEFEF',
    shape: 'circle',
    shapeOpposite: ['.red']
  },
  image: {
    shape: 'rect', // `rect` | `circle`
    color: '#EFEFEF',
    shapeOpposite: ['.white']
  },
  pseudo: {
    color: '#EFEFEF', // or transparent
    shape: 'circle', // circle | rect
    shapeOpposite: ['.apple', '.pen']
  },
  button: {
    color: '#EFEFEF',
    excludes: ['.center a']
  },
  defer: 5000,
  excludes: [],
  remove: [],
  hide: ['.ag-text', '.ag-image'],
  grayBlock: ['#header'],
  cssUnit: 'vw',
  cookies: [{
    name: 'SID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }, {
    name: 'USERID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }]
})

Versions

• Page Skeleton:
• Webpack:

webpack-log1.2.0

Description

[Description of the bug or feature]

Steps to reproduce

1. 开始之后可以到generator HTML
   

但是接下来就会报错，并且弹出windows找不到chrome

chrome为最新版本
在同目录下，运行puppeteer的demo是可以唤出chrome
第一次配置skeleton，网上也搜不到相关的问题
如果有什么低级的错误，还请谅解

Versions

• Page Skeleton: 0.7.0
• Webpack: 3.6.0

现在我能实现的是首屏生成骨架图，在切换不同路由的时候似乎没有对应的骨架图生成，我想问如果让每个路由，或者指定路由生成骨架图要怎么实现

Description

add webpack plugin config in vue.config.js

const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");
const path = require("path");
module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, "./shell"), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, "./shelldist"), // 最好和 `output.path` 相同
        routes: ["/"] // 将需要生成骨架屏的路由添加到数组中
      })
    ]
  }
};

run yarn serve
output:

 ERROR  Failed to compile with 1 errors                                                                                                                                                    15:19:28

  TypeError: callback is not a function

  - skeletonPlugin.js:39 compilation.plugin
    [page-skeleton-webpack-plugin-demo]/[page-skeleton-webpack-plugin]/src/skeletonPlugin.js:39:7


  - index.js:165
    [page-skeleton-webpack-plugin-demo]/[preload-webpack-plugin]/build/index.js:165:15


  - index.js:165
    [page-skeleton-webpack-plugin-demo]/[preload-webpack-plugin]/build/index.js:165:15


  - new Promise


  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [page-skeleton-webpack-plugin-demo]/[tapable]/lib/Hook.js:35:21

  - index.js:673
    [page-skeleton-webpack-plugin-demo]/[html-webpack-plugin]/index.js:673:47

  - index.js:178 Promise.resolve.then.then.then.then.then.then.html
    [page-skeleton-webpack-plugin-demo]/[html-webpack-plugin]/index.js:178:18


  - next_tick.js:118 process._tickCallback
    internal/process/next_tick.js:118:7

Plugin configration

for example:

new SkeletonPlugin({
  pathname: path.resolve(__dirname, `./src`),
  port: '7890',
  loading: 'spin',
  svg: {
    color: '#EFEFEF',
    shape: 'circle',
    shapeOpposite: ['.red']
  },
  image: {
    shape: 'rect', // `rect` | `circle`
    color: '#EFEFEF',
    shapeOpposite: ['.white']
  },
  pseudo: {
    color: '#EFEFEF', // or transparent
    shape: 'circle', // circle | rect
    shapeOpposite: ['.apple', '.pen']
  },
  button: {
    color: '#EFEFEF',
    excludes: ['.center a']
  },
  defer: 5000,
  excludes: [],
  remove: [],
  hide: ['.ag-text', '.ag-image'],
  grayBlock: ['#header'],
  cssUnit: 'vw',
  cookies: [{
    name: 'SID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }, {
    name: 'USERID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }]
})

Versions

• Page Skeleton: 0.10.1
• Webpack: 3.12.0

npm install error

npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ECONNRESET: request to https://registry.npmjs.org/@types%2fnode failed, reason: read ECONNRESET
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @types/node@^10.11.7
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'editorconfig'
npm ERR! notarget

你好，大概看了下文档自己跑了下 发现这种只针对首页生成骨架图吧，像单页面的内页这时候局部渲染的话这里面生成的骨架图好像就用不上吧，后面会有这种计划做内页骨架图吗

该插件是否支持hash url?

Description

new SkeletonPlugin({ pathname: path.resolve(__dirname,../index.html), // the path to store shell file staticDir: path.resolve(__dirname, '../static'), // the same as the output.pathroutes: ['/home/find'], // Which routes you want to generate skeleton screen defer:20000 }),
偶尔会提示生成成功 但是骨架屏是空白的

你好，我在看这个项目的源码，这是您第一提交的代码，index.js里，我有一个问题，就是在下面代码里，我打断点都走不进去，我想知道您在写这个项目的时候是怎么做调试的

const html = await page.evaluate((remove, excludes) => { 
    const $ = document.querySelectorAll
    if (remove.length) {
      const removeEle = $(remove.join(','))
      Array.from(removeEle).forEach(ele => ele.parentNode.removeChild(ele))
    }

    const excludesEle = excludes.length ? Array.from($(excludes.join(','))) : []
    const isBase64Img = img => /base64/.test(img.src)
    const imgs = []
    const texts = []
    const imgHandler = ele => {
      const div = document.createElement('div')
      const parent = ele.parentNode

      const { width, height } = ele.getBoundingClientRect()

      div.style.width = `${width}px`
      div.style.height = `${height}px`
      div.style.backgroundColor = '#efefef'

      parent.removeChild(ele)
      parent.appendChild(div)
    }
    const textHandler = ele => {
      const comStyle = window.getComputedStyle(ele)
      const { lineHeight, paddingTop, paddingRight, paddingBottom, position: opos, fontSize } = comStyle
      const position = ['fixed', 'absolute', 'flex'].find(p => p === opos) ? opos : 'relative'
      const height = ele.offsetHeight
      const lineCount = height / lineHeight | 0
      let textHeightRatio = parseInt(fontSize, 10) / parseInt(lineHeight, 10)
      if (Number.isNaN(textHeightRatio)) {
        textHeightRatio = 1 / 1.4
      }
      Object.assign(ele.style, {
        color: '#eee',
        backgroundImage: `linear-gradient(#fff ${(1 - textHeightRatio) / 2 * 100}%, #eee 0%, #eee ${((1 - textHeightRatio) / 2 + textHeightRatio) * 100}%, #fff 0%)`,
        backgroundSize: `100% ${lineHeight}px`,
        backgroundClip: 'content-box',
        backgroundPositionY: paddingTop,
        position
      })
      // add white mask
      if (lineCount > 1) {
        const div = document.createElement('div')

        Object.assign(div.style, {
          width: '50%',
          height: lineHeight,
          background: '#fff',
          position: 'absolute',
          right: paddingRight,
          bottom: paddingBottom
        })

        ele.appendChild(div)        
      }

    }

    const traverse = ele => {
      if (~excludesEle.indexOf(ele)) return false
      if (ele.tagName === 'IMG' && !isBase64Img(ele)) return imgs.push(ele)
      if (
        ele.childNodes
        && ele.childNodes.length === 1
        && ele.childNodes[0].nodeType === 3
        ) {
        return texts.push(ele)
      }

      if (ele.children && ele.children.length > 0) {
        Array.from(ele.children).forEach(child => traverse(child))
      }

    }

    traverse(document.documentElement)

    imgs.forEach(ele => imgHandler(ele))
    texts.forEach(ele => textHandler(ele))

    return document.documentElement.outerHTML

  }, remove, excludes)

  // browser.close()

  return { html }

Versions frist-commit

• Page Skeleton:
• Webpack:

可以运行的代码示例有没有

Description

I had succeed to install the plugin and start it,but when i touch the "preview skeleton page",I got an error named on the title.I wander if this plugin not support hash url?

Steps to reproduce

1. [First step]
2. [Second step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Link to an example: [If you're reporting a bug that's not reproducible, please try to reproduce it on JSFiddle, JS Bin, CodePen or a similar service and paste a link here]

Plugin configration

for example:

new SkeletonPlugin({
  pathname: path.resolve(__dirname, `./src`),
  port: '7890',
  loading: 'spin',
  svg: {
    color: '#EFEFEF',
    shape: 'circle',
    shapeOpposite: ['.red']
  },
  image: {
    shape: 'rect', // `rect` | `circle`
    color: '#EFEFEF',
    shapeOpposite: ['.white']
  },
  pseudo: {
    color: '#EFEFEF', // or transparent
    shape: 'circle', // circle | rect
    shapeOpposite: ['.apple', '.pen']
  },
  button: {
    color: '#EFEFEF',
    excludes: ['.center a']
  },
  defer: 5000,
  excludes: [],
  remove: [],
  hide: ['.ag-text', '.ag-image'],
  grayBlock: ['#header'],
  cssUnit: 'vw',
  cookies: [{
    name: 'SID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }, {
    name: 'USERID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }]
})

Versions

• Page Skeleton:
• Webpack:

1. 系统：windows10，浏览器chrome 69.0.3497,
2. 项目使用了create-react-app的webpack4版本以及config-overrides扩展内置配置, skeletonPlugin 配置如下：
   const skeletonPlugin = () => {
   new SkeletonPlugin({
   pathname: path.resolve(__dirname, ./shell), // the path to store shell file
   staticDir: path.resolve(__dirname, './build'), // the same as the output.path
   routes: ['/'], // Which routes you want to generate skeleton screen
   port: '8989',
   loading: 'chiaroscuro',
   })
   }

package种script配置："start": "npm-run-all -p watch-css start-js",

3. 问题描述：
   项目启动后在页面直用ctrl+enter无效，在控制台数据toggleBar提示：Uncaught ReferenceError: toggleBar is not defined，并没有看到插件交互界面，是不是除了该插件浏览器还需要安装什么工具

4. PS：实例也无法启动，包output.path这个是个undefined

node-pre-gyp ERR! Tried to download(403): https://node-zopfli.s3.amazonaws.com/Release/zopfli-v2.0.2-node-v57-win32-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI, unknown) (falling back to source compile with node-gyp)
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack at PythonFinder. (D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack at D:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "configure" "--fallback-to-build" "--module=D:\work\gfresh
_vux\node_modules\node-zopfli\lib\binding\node-v57-win32-x64\zopfli.node" "--module_name=zopfli" "--module_path=D:\work\gfresh_vux\node_modules\node-zopfli\lib\binding\node-v57-win32-x64"
gyp ERR! cwd D:\work\gfresh_vux\node_modules\node-zopfli
gyp ERR! node -v v8.11.3
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'D:\Program Files\nodejs\node.exe D:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=D:
work\gfresh_vux\node_modules\node-zopfli\lib\binding\node-v57-win32-x64\zopfli.node --module_name=zopfli --module_path=D:\work\gfresh_vux\node_modules\node-zopfli\lib\binding\node-v57-win32-x64' (1)
node-pre-gyp ERR! stack at ChildProcess. (D:\work\gfresh_vux\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
node-pre-gyp ERR! stack at emitTwo (events.js:126:13)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:214:7)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:925:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
node-pre-gyp ERR! System Windows_NT #10.0.17134
node-pre-gyp ERR! command "D:\Program Files\nodejs\node.exe" "D:\work\gfresh_vux\node_modules\node-pre-gyp\bin\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd D:\work\gfresh_vux\node_modules\node-zopfli
node-pre-gyp ERR! node -v v8.11.3
node-pre-gyp ERR! node-pre-gyp -v v0.6.39

如题，mac电脑最新版chrome跑的

新手 npm run dev 然后生成了骨架屏，写入了shell/index.html里
�开发环境中，能把sale/index.html里的 替换shell/index.html内容么

Description

error，response.ok() false
http://localhost:3000/static/js/bundle.js false

Plugin configration

for example:

new SkeletonPlugin({
      pathname: path.resolve(__dirname, './shell'), // the path to store shell file
      staticDir: path.resolve(__dirname, './build'), // the same as the `output.path`
      routes: ['/index', '/user', '/tool' ], // Which routes you want to generate skeleton screen
    }),

Versions

• Page Skeleton: v0.10.12
• Webpack: v3.8.1

Description

1.我的路由配置大概是这样的，有个组件mobileLayout专门写了一些移动端的样式，作为嵌套路由
移动端都在这个组件里

{
    path: '',
    component: mobileLayout,
    children: [
{
        path: 'index',
        name: '列表页',
        component: () =>
          import ('@/views/home/index'),
        meta: {
          title: '大视VLOG',
          icon: ''
        },
      },
      {
        path: 'download',
        name: '下载页',
        component: () =>
          import ('@/views/download/index'),
        meta: {
          title: '大视VLOG',
          icon: ''
        },
      },
      {
        path: 'play',
        name: '视频详情',
        meta: {
          title: '大视VLOG'
        },
        props: (route) => ({
          query: route.query.videoId
        }),
        component: () =>
          import ('@/views/play/index')
      },
      {
        path: 'userCenter',
        name: '个人主页',
        meta: {
          title: '大视VLOG'
        },
        props: (route) => ({
          query: route.query.userId
        }),
        component: () =>
          import ('@/views/userCenter/index')
      }
    ]
}

什么也生成不出来，看了弹出的页面控制台报错了
报错图

2.如果我只配置很简单的路由，就可以生成了，但生成的骨架元素尺寸很有问题，并且高度填不满页面。

{
    path: '',
    name: 'root',
    component: mobileLayout,
    children: [{
      path: 'index',
      name: '列表页',
      component: () =>
        import ('@/views/home/index'),
      meta: {
        title: '大视VLOG',
        icon: ''
      },
    }]
}

请见图
尺寸错误

谢谢

Plugin configration

for example:

    new SkeletonPlugin({
      pathname: path.resolve(__dirname, './shell'), // the path to store shell file
      staticDir: path.resolve(__dirname, './dist'), // the same as the `output.path`
      routes: ['/', '/index','/play','/userCenter'], // Which routes you want to generate skeleton screen
      defer:20000,
      device:'iPhone X'
    }),

Versions

• Page Skeleton:0.10.12
• Webpack:3.6.0

/node_modules/webpack-cli/bin/config-yargs.js:89
describe: optionsSchema.definitions.output.properties.path.description,
^

TypeError: Cannot read property 'properties' of undefined
at module.exports (/Users/zhengguorong/project/feature/page-skeleton-webpack-plugin/node_modules/webpack-cli/bin/config-yargs.js:89:48)
at /Users/zhengguorong/project/feature/page-skeleton-webpack-plugin/node_modules/webpack-cli/bin/webpack.js:60:27
at Object. (/Users/zhengguorong/project/feature/page-skeleton-webpack-plugin/node_modules/webpack-cli/bin/webpack.js:515:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)

Description

[Description of the bug or feature]

Steps to reproduce

1. [First step]
2. [Second step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Link to an example: [If you're reporting a bug that's not reproducible, please try to reproduce it on JSFiddle, JS Bin, CodePen or a similar service and paste a link here]

Plugin configration

for example:

new SkeletonPlugin({
  pathname: path.resolve(__dirname, `./src`),
  port: '7890',
  loading: 'spin',
  svg: {
    color: '#EFEFEF',
    shape: 'circle',
    shapeOpposite: ['.red']
  },
  image: {
    shape: 'rect', // `rect` | `circle`
    color: '#EFEFEF',
    shapeOpposite: ['.white']
  },
  pseudo: {
    color: '#EFEFEF', // or transparent
    shape: 'circle', // circle | rect
    shapeOpposite: ['.apple', '.pen']
  },
  button: {
    color: '#EFEFEF',
    excludes: ['.center a']
  },
  defer: 5000,
  excludes: [],
  remove: [],
  hide: ['.ag-text', '.ag-image'],
  grayBlock: ['#header'],
  cssUnit: 'vw',
  cookies: [{
    name: 'SID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }, {
    name: 'USERID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }]
})

Versions

• Page Skeleton:
• Webpack:

如题，安装这个鬼东西会卡住，依赖安装不能进行

目前小程序项目数据渲染比较大，优化页面需要骨架屏的注入。不知道对小程序的支持如何？ 希望大佬们解答一下@rlog @sofish @myst729 @cloudyan @cloverstd

Description

1. 下载vueCli3初始的项目 执行 npm install
2. 运行 npm run serve ,项目正常运行,命令行也没有报错
3. 然后调出控制条点击,生成preview,预览都ok,可以二维码预览,然后点击,写入shell文件目录
   
4. 结束 npm run serve.再次输入npm run serve,重新打包项目,在项目根目录下生成dist目录,然后打开项目,在开发环境下shell并没有注入

5. 结束npm run serve,运行npm run build,dist目录被删除,重新写入dist的index.html在#app元素中没有注入骨架屏对应的html,在生产环境下也没有注入

Plugin configration

以下也是vue.config.js的所有配置

const path = require('path');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'),
        staticDir: path.resolve(__dirname, './dist'),
        routes: ['/']
      })
    ]
  }
}

Versions

• Page Skeleton: ^0.10.12
• Webpack: webpack4.x
• VueCli: 3.2.1

这个能根据不同的页面，配置不同的骨架屏的页面吗？怎么配置的

-> "[PSG] Evaluation failed: TypeError: Cannot read property 'length' of undefined at forEach.type (:415:30) at Array.forEach () at traverse (:414:27) at genSkeleton (:518:5) at :3:7"

运行sample中的sale没有生成骨架屏



终端并无报错，也无生成的信息，求指教

Description

[Description of the bug or feature]

Steps to reproduce

1. [First step]
2. [Second step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Link to an example: [If you're reporting a bug that's not reproducible, please try to reproduce it on JSFiddle, JS Bin, CodePen or a similar service and paste a link here]

Plugin configration

for example:

new SkeletonPlugin({
  pathname: path.resolve(__dirname, `./src`),
  port: '7890',
  loading: 'spin',
  svg: {
    color: '#EFEFEF',
    shape: 'circle',
    shapeOpposite: ['.red']
  },
  image: {
    shape: 'rect', // `rect` | `circle`
    color: '#EFEFEF',
    shapeOpposite: ['.white']
  },
  pseudo: {
    color: '#EFEFEF', // or transparent
    shape: 'circle', // circle | rect
    shapeOpposite: ['.apple', '.pen']
  },
  button: {
    color: '#EFEFEF',
    excludes: ['.center a']
  },
  defer: 5000,
  excludes: [],
  remove: [],
  hide: ['.ag-text', '.ag-image'],
  grayBlock: ['#header'],
  cssUnit: 'vw',
  cookies: [{
    name: 'SID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }, {
    name: 'USERID',
    value: 'xxxxxx',
    url: 'https://xx.xxx.xx'
  }]
})

Versions

• Page Skeleton:
• Webpack:

今天用demo项目跑了一下。发现生成的骨架页面平均大小都在80K左右( demo项目，结构和样式都还较少 )

如果已有项目引入这些生成的骨架页面的话，那么整个项目的体积会增加很多倍。这样反而让项目在生产环境运行时变慢。

目前看来采用骨架页面的体积劣势远不如直接采用loading。想问下饿了么团队有准备优化方案么？

该插件是否只支持vue 的项目?