Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
<!-- subApp/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<!-- mark the entry script with entry attribute -->
<script src="https://unpkg.com/[email protected]/lib/mobx.umd.js" entry></script>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
</body>
</html>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'
})
})
});- url -
string- required, URL of the index HTML. - opts -
ImportEntryOpts- optional, Load configuration.
Promise<IImportResult>
-
ImportEntryOpts
- fetch -
typeof window.fetch | { fn?: typeof window.fetch, autoDecodeResponse?: boolean }- optional, Custom fetch method.- autoDecodeResponse - optional, Auto decode when the charset is not
utf-8(likegbkorgb2312), default isfalse.
- autoDecodeResponse - optional, Auto decode when the charset is not
- getPublicPath -
(entry: Entry) => string- optional, Customize the assets public path. - getTemplate -
(tpl: string) => string- optional, Customize the HTML template before proceeding.
- fetch -
-
IImportResult
- template -
string- Processed HTML template. - assetPublicPath -
string- Public path for assets. - getExternalScripts -
Promise<string[]>- Scripts URL from template. - getExternalStyleSheets -
Promise<string[]>- StyleSheets URL from template. - execScripts -
(sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise<unknown>- the return value is the last property onwindoworproxy windowwhich set by the entry script.- sandbox - optional, Window or proxy window.
- strictGlobal - optional, Strictly enforce the
sandbox.
- template -
-
ExecScriptsHooks
- beforeExec -
(code: string, script: string) => string | void- optional, call it before executing each script, ifreturn valueis a string, replacecodewithreturn value.- code - The inline script as a string.
- script - The URL of external script.
- afterExec -
(code: string, script: string) => void- 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.
- beforeExec -
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
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);
})
});- entry -
Entry- required, URL of the index HTML or assets. - opts -
ImportEntryOpts- optional, Load configuration.
Promise<IImportResult>
- 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.
Loads the assets(css,js) and embed into HTML template, get the exports from entry script.
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/[email protected]/dist/antd.min.css',
],
scripts: [
'https://unpkg.com/[email protected]/umd/react.production.min.js'
],
html: `<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="root"></div>
</body>
</html>`
}
importEntry('./subApp/index.html')
.then(res => {
res.execScripts().then(exports => {
console.log(exports);
})
});- entry -
string- required, The URL of entry assets (will use last of scripts when entry is null). - scripts -
string[]- required, The URL for scripts (should always include entry when entry is valid URL). - proxy -
Window- required, Window or proxy window. - opts -
ExecScriptsOpts- optional, Exec configuration.
Promise<T>- The returned value is the last property onwindoworproxy windowwhich set by the entry script.
- ExecScriptsOpts
- fetch -
typeof window.fetch- optional, Custom fetch method. - strictGlobal -
boolean- optional, Strictly enforce thesandbox. - success -
(exports: unknown) => void- optional, Use callback to get the result when successfully.- exports - Same as the return value.
- error -
CallableFunction- optional, Use callback to get the result when error. - ExecScriptsHooks.
- fetch -
Loads the scripts by URL on the custom sandbox, get the exports from entry script.
import { execScripts } from 'import-html-entry';
const scripts = [
'https://demo.com/entry.js',
'https://unpkg.com/[email protected]/umd/react.production.min.js'
]
execScripts(
'https://demo.com/entry.js',
scripts,
windows, // or custom sandbox
{
fetch: (...args) => window.fetch(...args),,
strictGlobal: true,
success: () => {},
error: () => {},
}
);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent