vue-browserify 将 yaml 文件导入为 javascript object vuejs2

Question

我使用 vuejs2 和 browserify (https://github.com/vuejs-templates/browserify)

我尝试使用 YAML 文件

我想尝试不同的方式来导入我的 .yml 文件：

1) 像json 文件一样直接导入。所以我不必在生产中提供yaml文件：

import Data from '../static/data.yml'

2) 从外部导入 url（这样我就可以在应用程序上更改数据而无需重建）：

3) 在保存时将 YML 转换为 JSON

实际上发现了很多使用 webpack 而不是使用 browserify 的解决方案

有我的package.json文件

{
  "name": "vuejs-browserify-yaml",
  "version": "0.1.0",
  "description": "A Vue.js project",
  "author": "John DOE <john.doe@gmail.com>",
  "private": true,
  "scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
    "serve": "http-server -o -c 1 -a localhost",
    "dev": "npm-run-all --parallel watchify serve",
    "lint": "eslint --ext .js,.vue src",
    "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
  },
  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  },
  "dependencies": {
    "vue": "^2.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "babelify": "^7.2.0",
    "browserify": "^13.1.0",
    "browserify-hmr": "^0.3.1",
    "cross-env": "^2.0.0",
    "envify": "^3.4.1",
    "eslint": "^3.3.0",
    "eslint-config-standard": "^5.3.5",
    "eslint-plugin-html": "^1.5.2",
    "eslint-plugin-promise": "^2.0.1",
    "eslint-plugin-standard": "^2.0.0",
    "http-server": "^0.9.0",
    "npm-run-all": "^2.3.0",
    "proxyquireify": "^3.0.1",
    "uglify-js": "^2.5.0",
    "vueify": "^9.0.0",
    "watchify": "^3.4.0"
  }
}

Answer 1

在各种论坛上花了很多时间后我找到了解决方案

1) 像json 文件一样直接导入。所以我不必在生产中提供yaml文件：

首先安装yamlify

npm install --save-dev yamlify

然后将yamlify添加到browserify转换

"browserify": {
    "transform": [
      "babelify",
      "vueify",
      "yamlify"
    ]
  },

最后将您的 YAML 作为经典 json 文件导入（例如 main.js）

import Data from '../static/example-data.yml'

2) 从外部导入 url

先安装yamljs

npm install --save-dev yamljs

然后就可以这样获取外部文件数据了

import YAML from 'yamljs'
const ExternalData = YAML.load('http://localhost:8080/static/example-data.yml')
console.log(ExternalData)

3) 在保存时将 YML 转换为 JSON 首先安装yamljs

npm install --save-dev yamljs

然后在 package.json 上更新脚本（添加 yml2json 并更新 watchify）

"scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js | npm run yaml2json",
    "yaml2json": "yaml2json static -r -s -w",
    "serve": "http-server -o -c 1 -a localhost",
    "dev": "npm-run-all --parallel watchify serve",
    "lint": "eslint --ext .js,.vue src",
    "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
  },

vue-browserify 将 yaml 文件导入为 javascript object vuejs2

vue-browserify import yaml file as javascript object vuejs2

yaml

browserify

vue.js