vue-browserify импортировать файл yaml как объект javascript vuejs2 - PullRequest
Новая
       9

vue-browserify импортировать файл yaml как объект javascript vuejs2

0 голосов
/ 14 октября 2018

Я использую vuejs2 с browserify (https://github.com/vuejs-templates/browserify)

Я пытаюсь поиграть с файлом YAML

Я хочу попробовать разные способы импорта моего файла .yml:

1) Непосредственный импорт как файл json.Поэтому мне не нужно предоставлять файл yaml в рабочем состоянии: 

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

2) Импорт из внешнего URL-адреса (поэтому я могу изменять данные в приложении без необходимости перестраивать):

3) Конвертировать YML в JSON при сохранении

На самом деле найдено много решений с веб-пакетом, но не с 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"
  }
}

1 Ответ

0 голосов
/ 14 октября 2018

Проведя много времени на различных форумах, я нашел решение

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"
  },
...