README.md · 高云峰/create-skeleton

# create-skeleton

> 轻松提供 CLI 自动生成骨屏, 提供 `includeNode`, 或者 `beforeDraw` 等方法定制化骨架屏, headless 为 false 支持打开待生成骨架屏页面，手动生成骨架屏

### Install

```bash
npm i create-skeleton -D
```

### Usage

1. 方案一： 提供 `create-skeleton.config.js` , 执行`npx create-skeleton`

- 配置 `output.filePath`，如果配置的是目录，会写入到该目录里的 `create-skeleton.html` (没有的话我们会创建)文件里；
- 自定义写入的方式 `writeSkeleton: (outputHtml: string) => void;`；
- 如果前面两种方式您都没有提供，那么将会在您当前目录下创建 `create-skeleton.html` ，并将骨架屏节点写入；

2. 方案二： `npx create-skeleton <create-skeleton-url>` 生成骨架屏

### Examples

```javascript
// create-skeleton.config.js
const fs = require("fs");

module.exports = {
  url: "https://baidu.com",
  output: {
    filePath: "",
    injectSelector: "#app"
  },
  background:
    "linear-gradient(90deg,rgba(190,190,190,.2) 25%,rgba(129,129,129,.24) 37%,rgba(190,190,190,.2) 63%);background-size: 400% 100%;",
  animation: "ant-skeleton-loading 1s linear infinite;",
  header: {
    // height: 44,
    // background: "#eee"
  },
  beforeDraw: function() {
    //生成骨架屏之前的操作，比如删除干扰节点
    const conWrap = document.querySelector(".con-wrap");
    if (conWrap) {
      conWrap.style.cssText = "visibility: hidden";
    }
  },
  includeNode: function(node, draw) {
    // 删除干扰节点
    if (node.id === "skipNode") {
      return false;
    }
  }
  // writeSkeleton: function(html) {
  //   //自己处理生成的骨架屏
  //   fs.writeFileSync(__dirname, html);
  // }
};
```

### 参数说明

| 参数                                                                                                           | 说明                                                                                                                                                                            | 默认值        | 是否必填 |
| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
| url                                                                                                            | [待生成骨架屏页面地址](https://github.com/puppeteer/puppeteer/blob/v10.4.0/docs/api.md#framegotourl-options)                                                                    | --            | 是       |
| extraHTTPHeaders                                                                                               | [请求头](https://github.com/puppeteer/puppeteer/blob/v10.4.0/docs/api.md#pagesetextrahttpheadersheaders)                                                                        | --            | 否       |
| device                                                                                                         | [设备类型](https://github.com/puppeteer/puppeteer/blob/v10.4.0/docs/api.md#puppeteerdevices)                                                                                    | iPhone 6      |          | -- | 是 |
| output.filePath                                                                                                | 生成的骨架屏节点写入的文件                                                                                                                                                      | --            | 否       |
| output.injectSelector                                                                                          | 骨架屏节点插入的位置                                                                                                                                                            | #app          | 否       |
| header.height                                                                                                  | 主题 header 的高                                                                                                                                                                | --            | 否       |
| header.background                                                                                              | 主题 header 的背景色                                                                                                                                                            | --            | 否       |
| background                                                                                                     | 骨架屏主题色                                                                                                                                                                    | #ecf0f2       | 否       |
| animation                                                                                                      | css3 动画属性                                                                                                                                                                   | --            | 否       |
| rootNode                                                                                                       | 针对模块生成骨架屏                                                                                                                                                              | document.body | 否       |
| beforeDraw                                                                                                     | 开始生成之前的操作                                                                                                                                                              | --            | 否       |
| includeNode(node, draw({width:numbenr,height:number,left:number, top:number, zIndex:number,background:'#ccc})) | 定制某个节点如何生成                                                                                                                                                            | --            | 否       |
| writeSkeleton(html)                                                                                            | 回调的骨架屏节点                                                                                                                                                                | --            | 否       |
| headless                                                                                                       | [ headless mode](https://developers.google.com/web/updates/2017/04/headless-chrome) 如果为 false, 将不关闭浏览器， 需手动点击生成骨架屏页面(按钮)右上角【骨架屏】按钮生成骨架屏 | true          | 否       |

高云峰/create-skeleton

简介

发行版

贡献者

语言

近期动态

高云峰/create-skeleton .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

高云峰/create-skeleton