https://github.com/react-doc/directory-trees-webpack-plugin
Store a JSON mapping of a directory.
https://github.com/react-doc/directory-trees-webpack-plugin
directory directory-tree webpack-plugin webpack3
Last synced: 28 days ago
JSON representation
Store a JSON mapping of a directory.
- Host: GitHub
- URL: https://github.com/react-doc/directory-trees-webpack-plugin
- Owner: react-doc
- Created: 2017-12-19T09:45:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-05T08:35:28.000Z (about 8 years ago)
- Last Synced: 2025-06-02T22:54:51.730Z (9 months ago)
- Topics: directory, directory-tree, webpack-plugin, webpack3
- Language: JavaScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Directory Tree Plugin
> A variation of [directory-tree-webpack-plugin](https://github.com/skipjack/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][1]
package, which does the majority of the work.
Install the plugin via NPM:
``` bash
npm i directory-trees-webpack-plugin --save
```
## Usage
This plugin is particularly useful when using [dynamic `import()`][2] 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__
``` diff
demo
|- package.json
|- webpack.config.js
|- /src
|- index.js
|- /content
|- index.md
|- about.md
|- contact.md
```
__webpack.config.js__
``` 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__
``` 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.
## Options
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][1] for a listing of all available options.
## Enhancing the Output
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`:
``` js
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.
[1]: https://github.com/uiw-react/node-directory-tree-md
[2]: https://webpack.js.org/api/module-methods/#import-