support4pack

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

目录结构

此包下有以下几个目录，其模块相同，但所用语法不同：

• lib 此目录下的模块，没有进行编译，包含 ES2017 甚至 ESLast 的语法，webpack 配置中，一般要对此目录的文件进行编译

模块

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

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