# yaml-js-loader

> A YAML file loader for webpack

Latest version **0.1.1** (published 2018-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install yaml-js-loader
pnpm add yaml-js-loader
yarn add yaml-js-loader
bun add yaml-js-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-02-04 |
| First published | 2018-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Inumidun Amao |
| Maintainers | tombot |

## Links

- npm: https://www.npmjs.com/package/yaml-js-loader
- Repository: https://github.com/iAmao/yaml-js-loader
- Homepage: https://github.com/iAmao/yaml-js-loader#readme
- Issues: https://github.com/iAmao/yaml-js-loader/issues
- npm.io page: https://npm.io/package/yaml-js-loader

## Dependencies (1)

- [js-yaml](https://npm.io/package/js-yaml.md) ^3.10.0

## Recent versions

- 0.1.1 (latest) — 2018-02-04
- 0.1.0 — 2018-02-04
- 0.0.1 — 2018-02-04

## README

## yaml-js-loader
[![npm version](https://badge.fury.io/js/yaml-js-loader.svg)](https://badge.fury.io/js/yaml-js-loader) [![Build Status](https://travis-ci.org/iAmao/yaml-js-loader.svg?branch=master)](https://travis-ci.org/iAmao/yaml-js-loader) [![codecov](https://codecov.io/gh/iAmao/yaml-js-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/iAmao/yaml-js-loader) [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/iAmao/yaml-js-loader/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/iAmao/yaml-js-loader/?branch=master)


Tells webpack how to load YAML files.

---


#### Installation

Open up your terminal and type the following
```
$ npm install --save-dev yaml-js-loader
```

---


#### Usage

The usage is quite easy.

Create a yaml file.

###### config.yml
```
name: Izuku Midoriya
quirk: One for all
friends:
 - Todoroki
 - Lida
 - Ochacho
 - Bakugo 

```


import the YAML file in your javascript file.

###### my-file.js
```
import config from './config.yml';

console.log(config);
// output -> {
//  url: "",
//  json: {
//    name: "Izuku Midoriya",
// .  quirk: "One for all",
//    friends: [
//      "Todoroki",
//      "Lida",
//      "Ochacho",
//      "Bakugo"
//    ]
// .},
//  text:"name: Izuku Midoriya\nquirk: One for all\nfriends:\n - Todoroki\n - Lida\n - Ochacho\n - Bakugo"\n
//}
```

Add the following configuration to webpack config file.

###### webpack.config.js
```
...

{
    test: /\.yml$/,
    loader: 'yaml-js-loader'
}
...
```

---

#### Usage(with file-loader)

Using with file loader provides a live URL to where the YAML file is served.
The file can be accessed by visiting `[base_url][webpack_public_path][url]` for example,

if,
- base_url = http://localhost:3005
- webpack_public_path = /public
- url = /static/config.d23e812af.yml

then,
to access the file in the browser, you would need to visit: `http://localhost:3005/public/static/config.d23e812af.yml`

Create a yaml file.

###### config.yml
```
name: Izuku Midoriya
quirk: One for all
friends:
 - Todoroki
 - Lida
 - Ochacho
 - Bakugo 

```


import the YAML file in your javascript file. Now, the url property should have a value.

###### my-file.js
```
import config from './config.yml';

console.log(config);
// output -> {
//  url: "/static/[name].[hash:8].[ext]",
//  json: {
//    name: "Izuku Midoriya",
// .  quirk: "One for all",
//    friends: [
//      "Todoroki",
//      "Lida",
//      "Ochacho",
//      "Bakugo"
//    ]
// .},
//  text:"name: Izuku Midoriya\nquirk: One for all\nfriends:\n - Todoroki\n - Lida\n - Ochacho\n - Bakugo"\n
//}
```

Add the following configuration to webpack config file.

###### webpack.config.js
```
module.exports = {
...

    {
        test: /\.(yml|yaml)$/,
        use: [
          { loader: 'yaml-js-loader' },
          {
            loader: 'file-loader',
            options: {
              name: 'static/[name].[hash:8].[ext]'
            }
          }
        ]
    }
...
}
```

---

---
_Source: https://npm.io/package/yaml-js-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._