page-skeleton-webpack-plugin 官方Demo 踩坑史

page-skeleton-webpack-plugin 官方Demo 踩坑史，助跑、能用~

目前page-skeleton-webpack-plugin 彷佛沒怎麼維護了，初看一堆的issues 難如下手呀。

不過看了自動生成骨架屏的原理，這個文章 基於page-skeleton-webpack-plugin分析自動生成骨架屏原理，仍是頗有必要進行一次DEMO 演習，以證實生成骨架屏的可行性、必要性。

下面記錄踩坑步驟：

一、拉取page-skeleton-webpack-plugin 代碼,或者下載zip包

git clone https://github.com/ElemeFE/page-skeleton-webpack-plugin.git
複製代碼

二、拉好代碼以後，切換到examples/sale 案例目錄下，進行依賴安裝，這裏你可能會遇到Puppeteer 安裝失敗的問題，這裏請你上網|cnpm |yarn等，多試幾回，直到成功。

三、跑npm run dev 這裏你可能遇到：

• 報TypeError: Cannot read property 'properties' of undefined
  • 升級webpack-cli到3.1.1 npm install --save-dev webpack-cli@3.1.1
  • 去除Demo 工程webpack.config.js // 119line下的storagies 對象，避免報錯
• 報缺style-loader模塊
  • 安裝style-loader 模塊
• 報address already in use :::8989 at Server ,修改爲任何端口，依然提示端口被佔用的bug。
  • 發現compiler.hooks.entryOption被執了兩次，因而：在createServer方法中判斷插件的server是否被建立，沒建立的時， 正常執行，建立過就什麼都不作了。修改文件在node_modules/page-skeleton-webpack-plugin-master/src/skeletonPlugin.js 在SkeletonPlugin.prototype.createServer 里加一個if判斷

// const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
// server.listen().catch(err => server.log.warn(err))
if (!this.server) {
    const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
    server.listen().catch(err => server.log.warn(err))
}
複製代碼

而後跑dev 應該問題不大了，如何還有問題，依賴刪了再從新試一下。不少問題均可以在issues 中找到，只是官方沒有對demo進行更新處理。

四、接下來，應該如何去更新shell 目錄下的骨架樣式文件呢？

dev 以後，默認會打開demo 頁，而後命令端這裏會起一個page-skeleton的server,咱們在瀏覽器打開這個端口（ip+端口號）的界面：

在這裏咱們能夠預覽到骨架屏和樣式代碼，咱們也能夠修改對應的樣式代碼，最終保存到shell文件下的文件中。 整個生成骨架頁面的核心也就是在這一步

五、npm run build把生成以後的shell 文件打包到輸出結果中。

最終，能夠看到，輸出的內容都放置到Dom app 節點下。 但願能夠幫到。

附上，該插件簡易時序圖：

參考文章