为vue-cli/webpack项目增加YAML文件支持

YAML语法用来定义JSON简直简介到完美。

学习链接 https://www.ruanyifeng.com/blog/2016/07/yaml.html

下面来为项目增加YAML语法的支持

• 动态调用/实时编译

  安装

  yarn add js-yaml
  

  使用

  import {safeLoad as parseYAML} from "js-yaml";
  const data= parseYAML(`
      title: 标题
  `)
  console.log(data)  //{title:"标题"}
  

• 使用方法2，直接把YAML作为数据加载进项目

  安装

  yarn add -D js-yaml-loader
  

  配置

  vue.config.js
  chainWebpack(config){
      config
          .module
              .rule("yaml")
                  .test(/\.ya?ml$/)
                  .use("yaml")
                      .loader('js-yaml-loader')
  }
  
  //或者
  configureWebpack: {
      module: {
          rules: [
              {
                  test: /\.ya?ml$/,
                  use: ['js-yaml-loader' ]
              }
          ]
      }
  },
  

  使用

  improt option from "src/path/to/yaml.yaml"
  console.log(option);