fusebox-pug-plugin
v2.0.1
Published
Import pug files with fusebox allowing to use ~ to import from root and node: to import from node_modules
Downloads
22
Readme
Pug Plugin
PugPlugin is used to handle .pug files rendering html content and DON'T HAVE TO be chained with HtmlPlugin, see details bellow. Based on HTMLPlugin of fusebox, see source and doc
Install
npm i --save fusebox-pug-plugin
Usage
Typescript
import {PugPlugin} from "fusebox-pug-plugin";
let fuse = fsbx.FuseBox.init({
homeDir: "./src",
outFile: "./bundle.js",
plugins: [
PugPlugin()
]
});
Javascript (ES6)
const PugPlugin = require("fusebox-pug-plugin").PugPlugin;
let fuse = fsbx.FuseBox.init({
homeDir: "./src",
outFile: "./bundle.js",
plugins: [
PugPlugin()
]
});
Options
The options availables are specified in IPugPluginOptions interface:
Option | Default | Description
------------|---------|------------------------------------------------------------------------------
hmr | true | Define if emitJavascriptHotReload should be invoked after render component
useDefault | true | Define if the file should be exporting with default
pug | | Any pug options. See options
pug.pretty | true | Pretty output
import {PugPlugin,IPugPluginOptions} from "fusebox-pug-plugin";
let pugPluginOptions:IPugPluginOptions = {
hmr:true,// If true, emitJavascriptHotReload will be invoked after render component
useDefault:true,//If true, the file could be imported using default export
pug:{//Any pug option
pretty:true
}
}
let fuse = fsbx.FuseBox.init({
homeDir: "./src",
outFile: "./bundle.js",
plugins: [
PugPlugin(pugPluginOptions)
]
});
Macros for include
You have 2 special macros availables:
Tilde
Use tilde ( ~ ) to import files from root (homeDir from fuse configuration) Using:
root
|- folder
| |-subfolder
| |- file2.pug
|- file.pug
root/folder/subfolder/file2.pug
include ~/file
//- Is the same as
include ../../file
node:
Use node: to import files from node_modules folder Using:
root
|- node_modules
| |- module
| |-moduleFile.pug
|- folder
| |-subfolder
| |- file.pug
root/folder/subfolder/file.pug
include node:module/moduleFile
//- Is the same as
include ../../../node_modules/module/moduleFile
Authors
- Davinchi Need help / support? Create an issue or contact with us
Notes
HtmlPlugin
Pug allows to include and extend from other pug files, when a file is modified, pug doesn't track by default the dependencies, HtmlPlugin by default uses caching to speed up bundling, with the cache if a file included is updated the file included won't be updated. To prevent this, is necessary compile all the pug files with each modification (yes, it's a pity). Exists a tool called pug-inheritance that get all the files that uses another file, fusebox only notifies the file imported in .js/.ts so is not possible use pug-inheritance. For example:
import template from "./myFile.pug"
myFile.pug
include ./_otherFile.pug
_otherFile.pug
//Some content
If pug-inheritane receives _otherFile.pug and is capable of get all the files that use _otherFile.pug, but the file tracked by fusebox is myFile.pug so is not possible to know when _otherFile.pug changes
If you find another way please feel free to contribute :)