README
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
}
}
}
]
}
}