vue.js - vue-browserify 将 yaml 文件导入为 javascript 对象 vuejs2
问题描述
我将 vuejs2 与 browserify 一起使用(https://github.com/vuejs-templates/browserify)
我尝试使用 YAML 文件
我想尝试不同的方式来导入我的 .yml 文件:
1)像json文件一样直接导入。所以我不必在生产中提供 yaml 文件:
import Data from '../static/data.yml'
2)从外部网址导入(这样我就可以更改应用程序上的数据而无需重建):
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"
}
}
解决方案
在各种论坛上花了很多时间后,我找到了解决方案
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"
},
推荐阅读
- r - 按数字而不是按字母顺序对 ggplot 图进行排序
- python - 如何验证元组中是否不存在变量?
- python - 如何在Django的模板中显示所有字典?
- java - Sonarqube 无法启动 | 无法以 root 身份运行 elasticsearch
- flask - 使用flask_cas登录后,如何将用户保存到数据库?
- database - 在数据库中创建便笺并在 dart/flutter 中更新
- python - 使用 bsub 并行化作业
- flutter - Flutter Web 应用程序上未显示具有 x% 不透明度的白色
- python - 通过 pyathena 和 sqlalchemy 在 Python 中从 Athena 查询表
- excel - 更改为 64 位后的运行时错误 91