# support4pack

**Repository Path**: fierflame/support4pack

## Basic Information

- **Project Name**: support4pack
- **Description**: support4pack 是基于 webpack 开发过程中用到的工具封装
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-07-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

support4pack
========
support4pack 是基于 webpack 开发过程中用到的工具封装

目录结构
--------
此包下有以下几个目录，其模块相同，但所用语法不同：
- `lib` 此目录下的模块，没有进行编译，包含 ES2017 甚至 ESLast 的语法，webpack 配置中，一般要对此目录的文件进行编译
<!-- - `lib-es6` 此目录下的模块，语法进行了一定的编译，只包含 ES2015 及更早的语法，对于不要求支持早期浏览器的项目可以直接使用此目录下模块 -->
<!-- - `lib-es5` 此目录下的模块，语法进行了较多的编译，只包含 ES5 及更早的语法，特别的，生成器、异步生成器等都进行了转换，需要 -->

模块
--------
### auto-render-default-vue-component  

引入此模块，会自动引入 `default-element` 模块。  

如果 webpack 打包的入口文件的默认导出是 Vue 组件，将会创建此组件的一个实例并挂载在 `default-element` 模块创建的 div 标签上。  

模块的导出为创建的组件的实例(如果入口的默认导出不是 Vue 组件，将是 undefined )的 Promise 封装  

**注意** 不要在入口模块以外的模块中引入此文件，以免产生意料之外的问题

### auto-render-default-react-component  

与 `auto-render-default-vue-component` 类似，只是 `auto-render-default-react-component` 针对 `react` 组件  

### render-vue-component

引入此模块，会自动引入 `default-element` 模块。  

此模块导出以下几个方法：

- `get(expprts?: VueComponentClass | {default?: VueComponentClass} | any): Promise<typeof VueComponentClass>`  
  异步获取模块默认导出的 Vue 组件，支持 EJS 模块和 ES Module 模块  
  如果省略参数，则为获取入口模块的默认导出
  别名：`getComponent`、`getVueComponent`  
- `render(Component: VueComponentClass, props?: object, htmlElement?: HTMLElement): VueComponent`  
  将 props 作为参数创建 Vue 组件的组件并挂载到 htmlElement 上  
  `props` 与 `htmlElement` 均可省略  
  **注意** 只能在启动时，可以省略 `htmlElement`， 否则会导致页面空白
  `props` 默认为 `{}`  
  `htmlElement` 默认为 `default-element` 模块创建的 div 标签  
  返回值为创建的实例
  别名：`renderComponent`、`renderVueComponent`  
- `renderDefault(props?: object, htmlElement?: HTMLElement): Promise<VueComponent | undefined>`  
  类似与 `render` 函数，区别在于是异步渲染入口模块默认导出的 Vue 组件，如果入口模块默认导出不是 Vue 组件，将返回 `Promise<undefined>`  
  如果入口模块默认导出是 Vue 组件，则相当于 `render(away get(), props, htmlElement)`  
  别名：`renderDefaultComponent`、`renderDefaultVueComponent`  

### render-react-component

与 `render-vue-component` 类似，只是 `render-react-component` 针对 `react` 组件  

**注意** 导出方法的别名中的 `Vue` 需要也改为了 `React`

### current-script

此模块的默认导出 webpack 生成的包含入口模块的脚本的标签  
用于解决部分浏览器没有 document.currentScript 对象的问题  
**警告** 如果引入此模块，至少需要在脚本启动时引入一次，否则可能会获取错误  

### main-export

入口模块的导出的 Promise 封装  
采用 Promise 封装的原因是解决只能在模块执行完后才能够保证正确获取完整的模块导出的问题  

### create-element

此模块默认导出以下方法：

`createElement(tagName = 'div'): HTMLElement`
脚本加载期间，在脚本标签后面创建 HTML 标签  
**注意** 如果调用多次，将会在脚本标签后面依次创建多个标签  
**注意** 只能在脚本启动时执行，否则会导致整个页面空白  

### default-element
引入此模块，会自动通过 `create-element` 模块创建的一个 Div 标签  
多次引用此模块将只会得到同一个标签  
以下模块已自动引入此模块
- auto-render-default-component
- auto-render-default-react-component
- auto-render-default-vue-component

**警告** 如果引入此模块，至少需要在脚本启动时引入一次，否则可能会导致整个页面空白