Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
directory-trees-webpack-plugin
Advanced tools
Readme
A variation of directory-tree-webpack-plugin
This plugin allows you to generate a JSON representation of a directory and all its child nodes (files and folders). It uses the fantastic directory-tree-md package, which does the majority of the work.
Install the plugin via NPM:
npm i directory-trees-webpack-plugin --save
This plugin is particularly useful when using dynamic import()
statements
as you can get a mapping of all the items in the import(...)
location. For example,
let's say we wanted to dynamically import()
all *.md
pages within a content
directory:
project
demo
|- package.json
|- webpack.config.js
|- /src
|- index.js
|- /content
|- index.md
|- about.md
|- contact.md
webpack.config.js
const PATH = require('path')
const DirectoryTreePlugin = require('directory-trees-webpack-plugin')
module.exports = {
entry: './src/index.js',
plugins: [
new DirectoryTreePlugin({
dir: './src/content',
// dir: ['./src/content','./src/content2'],
path: './src/_content.json',
// watch: true,
watch: {
dir: PATH.join('./src/.catch', './md'), // Save to the specified directory
filename: 'underline', // "underline | dir"
sep: '___', // Named directory path, using ___ interval
},
mdconf: true, // Whether to return Markdown configuration.
extensions: /\.md/
})
],
module: {
rules: [
{
test: /\.md/,
use: [
'html-loader',
'markdown-loader'
]
}
]
},
output: {
path: PATH.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
src/index.js
import ContentTree from './_content.json'
ContentTree.children.forEach(page => {
import(`./content/${item.path}.md`)
.then(body => {
console.log('The page object can be used to generate routes, build navigations, and more...')
console.log(page)
console.log('The body string can be rendered when needed...')
console.log(body)
})
.catch(error => console.error('Failed to load page!'))
})
Note that the example above uses promises and arrow functions. In a real app, you would likely polyfill these ES6+ features to ensure they work on older browsers.
The following options can be passed to the plugin:
dir
(string/string[]): A path to the directory that should be mapped.path
(string): The path to and filename of the JSON file to create.watch
(boolean/object): The path to and filename of the js file to create, Used for webpack monitoring file changes.
dir
Copy to the '/path/md' directory.filename
"underline | dir"sep
filename="underline", File name to the directory, using '_' interval, default value ''.mdconf
(string): Whether to return Markdown configuration..enhance
(func): A function to execute on every item in the tree (see below).All the remaining options are passed to the directory-tree
package. See that
package's documentation for a listing of all available options.
To customize each item in the tree, simply pass an enhance
method. When this
option is passed, the plugin will recurse through the tree calling it on every
item. Here's a small example of how it can be used to change each item's path
:
new DirectoryTreePlugin({
dir: './src/content',
path: './src/_content.json',
extensions: /\.md/,
enhance: (item, options) => {
item.path = item.path.replace(options.dir, '')
return item
}
})
The first parameter given to the method is the item
and the second, options
,
contains the same options object passed to the plugin. Note that this function
MUST be deterministic, if it isn't an infinite loop of tree generation will
occur.
FAQs
Store a JSON mapping of a directory.
The npm package directory-trees-webpack-plugin receives a total of 14 weekly downloads. As such, directory-trees-webpack-plugin popularity was classified as not popular.
We found that directory-trees-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.