support4pack v0.1.4
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
警告 如果引入此模块,至少需要在脚本启动时引入一次,否则可能会导致整个页面空白