import html and get the exports of entry
npm install import-html-entry``html
`
`js
import importHTML from 'import-html-entry';
importHTML('./subApp/index.html')
.then(res => {
console.log(res.template);
res.execScripts().then(exports => {
const mobx = exports;
const { observable } = mobx;
observable({
name: 'kuitos'
})
})
});
`
- importHTML
- importEntry
- execScripts
#### importHTML(url, opts?)
##### Parameters
- url - string - required, URL of the index HTML.ImportEntryOpts
- opts - - optional, Load configuration.
##### Return
- Promise
##### Type
- ImportEntryOpts
- fetch - typeof window.fetch | { fn?: typeof window.fetch, autoDecodeResponse?: boolean } - optional, Custom fetch method.utf-8
- autoDecodeResponse - optional, Auto decode when the charset is not (like gbk or gb2312), default is false.(entry: Entry) => string
- getPublicPath - - optional, Customize the assets public path.(tpl: string) => string
- getTemplate - - optional, Customize the HTML template before proceeding.
- IImportResult
- template - string - Processed HTML template.string
- assetPublicPath - - Public path for assets.Promise
- getExternalScripts - - Scripts URL from template.Promise
- getExternalStyleSheets - - StyleSheets URL from template.(sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise
- execScripts - - the return value is the last property on window or proxy window which set by the entry script.sandbox
- sandbox - optional, Window or proxy window.
- strictGlobal - optional, Strictly enforce the .
- ExecScriptsHooks
- beforeExec - (code: string, script: string) => string | void - optional, call it before executing each script, if return value is a string, replace code with return value.(code: string, script: string) => void
- code - The inline script as a string.
- script - The URL of external script.
- afterExec - - optional, call it after executing each script, and the call will stop if the execution error occurs.
- code - The inline script as a string.
- script - The URL of external script.
##### Usage
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
##### Sample
`js
import importHTML from 'import-html-entry';
const opts = {
fetch: {
fn: (...args) => window.fetch(...args),
autoDecodeResponse: true,
},
getPublicPath: (entry) => ${entry}/newPublicPath/,
getTemplate: (tpl) => tpl.replace(/SOME_RULES/, '\n//Replaced\n'),
}
importHTML('./subApp/index.html')
.then(res => {
res.execScripts().then(exports => {
console.log(exports);
})
});
`
#### importEntry(entry, opts?)
##### Parameters
- entry - Entry - required, URL of the index HTML or assets.ImportEntryOpts
- opts - - optional, Load configuration.
##### Return
- Promise
##### Type
- Entry - string | { styles?: string[], scripts?: string[], html?: string } - When type as string, importEntry will run as importHTML, otherwise will load scripts and add styleSheets in your HTML string which you're provided or not.
- styles - The URL for styles.
- scripts - The URL for scripts.
- html - The HTML template as a string, default is empty string.
> Other type as same as importHTML.
##### Usage
Loads the assets(css,js) and embed into HTML template, get the exports from entry script.
##### Sample
`js
import { importEntry } from 'import-html-entry';
const opts = {
fetch: {
fn: (...args) => window.fetch(...args),
autoDecodeResponse: true,
},
getPublicPath: (entry) => ${entry}/newPublicPath/,
getTemplate: (tpl) => tpl.replace(/SOME_RULES/, '\n//Replaced\n'),
}
const entryOpts = {
styles: [
'https://unpkg.com/antd@3.13.6/dist/antd.min.css',
],
scripts: [
'https://unpkg.com/react@16.4.2/umd/react.production.min.js'
],
html: