Yaml loader for webpack
Webpack loader for yaml format with support of NODE_ENV and ability to change keys and values of yaml objects in compile time
Install
npm install --save-dev @friends-of-js/yaml-loader
Usage
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.ya?ml$/,
use: [
{
loader: '@friends-of-js/yaml-loader',
}
]
}
]
}
}
Then in your code:
import content from './path/to/yaml-file.yaml'
Yaml loader provide only default export of all yaml content.
Options
Name | Type | Default | Description |
---|---|---|---|
useNodeEnv |
boolean |
false |
If true - load only part of yaml file that corresponds to current NODE_ENV |
transformKeysRecursive |
(key: string) => string |
undefined |
Function for recursive change object keys |
transformValues |
(value: any) => any |
undefined |
Function for shallow change values of yaml file |
useNodeEnv
If useNodeEnv
set to true
- yaml-loader try to load part of file that corrensonds to current NODE_ENV.
example.yaml
production:
API_KEY: 123456
TEST:
API_KEY: 654321
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.ya?ml$/,
use: [
{
loader: '@friends-of-js/yaml-loader',
options: { useNodeEnv: true }
}
]
}
]
}
}
So if your NODE_ENV = 'test' - yaml loader would create bundle with this content:
module.exports = { "API_KEY":654321 };
transformKeysRecursive
You can pass function to transformKeysRecursive
. It would recursively change all keys in objects
example.yaml
first_key: 1
second_key: 2
third_key:
- object_key: value
webpack.config.js
function capitalize (word) {
return `${word.slice(0, 1).toUpperCase()}${word.slice(1).toLowerCase()}`
}
function camelize (text, separator = '_') {
const words = text.split(separator)
return [words[0], words.slice(1).map((word) => capitalize(word))].join('')
}
module.exports = {
module: {
rules: [
{
test: /\.ya?ml$/,
use: [
{
loader: '@friends-of-js/yaml-loader',
options: {
transformKeysRecursive: camelize
}
}
]
}
]
}
}
It would produce this object:
module.exports = {
firstKey: 1,
secondKey: 2,
thirdKey: [
{ objectKey: 'value'}
]
}
As you can see, keys in object inside array are also changed.
transformValues
You can pass function to transformValues
. It would change values of yaml content, but this function is not recursive.
example1.yaml
first_key: 1
second_key: 2
example2.yaml
string content of file
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.ya?ml$/,
use: [
{
loader: '@friends-of-js/yaml-loader',
options: {
tranformValues: (value) => typeof value === 'number' ? value + 10 : `this is `${value}`
}
}
]
}
]
}
}
It would produce this object for example1.yaml:
module.exports = { first_key: 11, second_key: 12 }
And this content for example2.yaml:
module.exports = 'this is string content of file'