vue.js - vue-browserify 将 yaml 文件导入为 javascript 对象 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"
  },