skeleton-webpack-plugin

该webpack插件主要用于自动化生成页面的骨架屏

如何使用

在使用之前你需要先安装好该插件，通过如下两种方式都可以完成安装

npm i skeleton-webpack-plugin --save-dev

or

yarn add skeleton-webpack-plugin --dev

插件安装完成之后，可以在你开发环境的webpack中进行如下配置

const SkeletonWebpackPlugin = require('skeleton-webpack-plugin')
cosnt HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: 'index.js',
  mode: 'development',
  output: {
    path: 'dist',
    filename: 'index.bundle.js'
  },
  plugins: [
    new SkeletonWebpackPlugin({
      outDir: __dirname,
      projectDir: __dirname,
      plugins: []
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      inject: true
    })
  ]
}

添加完配置之后当你启动dev server本地预览页面时，可以打开你的控制台输入skeleton，然后按下回车键，如下图所示

此时，skeleton-webpack-plugin将会生成骨架屏页面的html，并输出到你的指定的文件夹下

配置

skeleton-webpack-plugin构造函数接受三个配置项

• outDir: 骨架屏页面html的输出目录

• projectDir: 当前工程的根目录

• plugins: 骨架屏插件数组，非必传。该参数用于接受骨架屏转化插件函数，下文会有详述。

怎样开发骨架屏插件

骨架屏插件是一个函数，如下所示

function exampleSkeletonPlugin (astInfo, route, projectDir) {
astInfo = {
  html: {
      ast: htmlAst,
      stringify: htmlStringify
    },
    css: {
      ast: cssAst,
      stringify: cssStringify
    }
}
route = window.location.pathname
// 你可以在该函数中编写转换逻辑，将骨架屏的html与css转化为不同端的代码，比如微信小程序，react native，weex，快应用等等。
}

astInfo参数主要包含骨架屏html与css的抽象语法树以及将语法树转化为字符串的stringify函数

html抽象语法树的格式如下:

<div class='post post-featured'>
  <p>Himalaya parsed me...</p>
  <!-- ...and I liked it. -->
</div>

[{
  type: 'element',
  tagName: 'div',
  attributes: [{
    key: 'class',
    value: 'post post-featured'
  }],
  children: [{
    type: 'element',
    tagName: 'p',
    attributes: [],
    children: [{
      type: 'text',
      content: 'Himalaya parsed me...'
    }]
  }, {
    type: 'comment',
    content: ' ...and I liked it. '
  }]
}]

css抽象语法树格式如下:

body {
  background: #eee;
  color: #888;
}

{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [
          "body"
        ],
        "declarations": [
          {
            "type": "declaration",
            "property": "background",
            "value": "#eee",
            "position": {
              "start": {
                "line": 2,
                "column": 3
              },
              "end": {
                "line": 2,
                "column": 19
              }
            }
          },
          {
            "type": "declaration",
            "property": "color",
            "value": "#888",
            "position": {
              "start": {
                "line": 3,
                "column": 3
              },
              "end": {
                "line": 3,
                "column": 14
              }
            }
          }
        ],
        "position": {
          "start": {
            "line": 1,
            "column": 1
          },
          "end": {
            "line": 4,
            "column": 2
          }
        }
      }
    ]
  }
}