fis3-postpackager-inject
v1.0.6
Published
fis3打包阶段注入js和css链接
Downloads
2
Maintainers
peter_bjReadme
fis3-postpackager-inject
fis3打包最后阶段，向html注入自定义的 js / css链接
使用场景
- 在postpackager阶段，插入第三方库文件/外链/自定义链接的js/css
结合 fis3-packager-deps-pack2 使用
fis.media("beta").match("::package", {
packager: fis.plugin("deps-pack2", {
useTrack: true,
useSourceMap: false,
"/pkg/post.js": [
"/pages/post/post.html:deps"
],
"/pkg/post.css": [
"/pages/post/post.html:deps"
],
"/pkg/search.js": [
"/pages/search/search.html:deps"
]
}),
postpackager: fis.plugin("inject", {
"/pages/post/post.html": [
"/pkg/post.js", //将packager阶段生成的pkg文件注入到html中
"/pkg/post2.js",
"/pkg/post3.js",//可以有多个js链接/自定义/http(s)链接
"/pkg/post.css"
],
"/pages/search/search.html": [
"/pkg/search.js"
]
})
});
插件的出发点是和fis3-packager-deps-pack2搭配使用，把HTML依赖的所有js和css文件打包成一个文件后再注入回html中。
js会替换html中的 <!--SCRIPT_PLACEHOLDER-->
css链接会替换html文件中的 <!--STYLE_PLACEHOLDER-->
post.html编译前
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--STYLE_PLACEHOLDER-->
</head>
<body>
<!--SCRIPT_PLACEHOLDER-->
</body>
</html>post.html注入js和css后
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/pkg/post.css">
</head>
<body>
<script type="text/javascript" src="/pkg/post.js"></script>
<script type="text/javascript" src="/pkg/post2.js"></script>
<script type="text/javascript" src="/pkg/post3.js"></script>
</body>
</html>