文章发布于 掘金,通过对比 JS Entry,完整介绍了 HTML Entry 的原理、实际应用和源码实现
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'
})
})
});