fis3-postpackager-inject
Version:
fis3打包阶段注入js和css链接
80 lines (65 loc) • 2.33 kB
Markdown
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](https://www.npmjs.com/package/fis3-packager-deps-pack2)搭配使用，把HTML依赖的所有js和css文件打包成一个文件后再注入回html中。
### js会替换html中的 <\!--SCRIPT_PLACEHOLDER-->
### css链接会替换html文件中的 <\!--STYLE_PLACEHOLDER-->
### post.html编译前
<html>
<head>
<title></title>
<!--STYLE_PLACEHOLDER-->
</head>
<body>
<!--SCRIPT_PLACEHOLDER-->
</body>
</html>
### post.html注入js和css后
<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>
### 其他fis插件
- [fis3-packager-deps-pack2](https://www.npmjs.com/package/fis3-packager-deps-pack2)
- [fis3-lint-flow](https://www.npmjs.com/package/fis3-lint-flow)
- [fis3-lint-sass](https://www.npmjs.com/package/fis3-lint-sass)