Webpack-Yaml-> JSON->提取文件 [英] Webpack - Yaml -> JSON -> Extract file
问题描述
我有一个带有一些翻译的YAML文件.我需要将这些文件转换为JSON文件.我试过使用yaml-import-loader
和json-loader
,但出现错误.
I have a YAML file with a few translations. I need to transform these files into a JSON file. I've tried using yaml-import-loader
and json-loader
but I get an error.
这是我的设置:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractEnglish = new ExtractTextPlugin('lang/en.js');
module.exports = {
entry: [
'./src/locales/application.en.yml',
],
output: {
filename: 'english.js',
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.en\.yml$/,
use: extractEnglish.extract({
use: [
// { loader: 'json-loader' },
{
loader: 'yaml-import-loader',
options: {
output: 'json',
},
}],
}),
},
],
},
plugins: [
extractEnglish,
],
};
我得到的错误:
Users/xxx/Documents/Project/node_modules/extract-text-webpack-plugin/dist/index.js:188
chunk.sortModules();
^
TypeError: chunk.sortModules is not a function
at /Users/xxx/Documents/Project/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
无论是否注释json-loader
,都是相同的错误.
Same error whether or not the json-loader
is commented or not.
我真的不明白是怎么回事.
I really don't understand what is going wrong.
版本: "webpack":"2.6.1", "extract-text-webpack-plugin":"^ 3.0.0", "json-loader":"^ 0.5.7",
Versions: "webpack": "2.6.1", "extract-text-webpack-plugin": "^3.0.0", "json-loader": "^0.5.7",
推荐答案
不确定是否会帮助您解决问题,但是最近我找到了解决i18n加载问题的方法.我这样做是为了将YAML预先提取到JSON文件中,因为我使用angular-translate并需要动态地按需加载文件.我避免使用extract-text-webpack-plugin,而只使用加载程序:file-loader和yaml-loader.
Not sure if this will help your situation but I recently found a solution to my i18n loading problem. I do this to extract YAML into JSON files upfront as I use angular-translate and needed to load files dynamically and on-demand. I avoid extract-text-webpack-plugin and use only loaders: file-loader and yaml-loader.
首先,我在源代码的开头附近设置.yaml文件的导入(在我的情况下,是特定的一系列导入文件供webpack处理)
First I setup the import of my .yaml files near the beginning of source (in my case a specific chain of import files for webpack to process)
import "./i18n/en.user.yaml";
我更新了webpack配置,将YAML转换为JSON,并使其可以动态加载(所有内容都来自我的"src"目录,因此是上下文):
I updated webpack config to translate YAML to JSON and have it available to load dynamically (everything originates from my 'src' directory, hence the context):
rules: [{
test: /.\.yaml$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].json',
context: 'src'
}
},{
loader: 'yaml-loader'
}]
}]
这将转换我的yaml文件并将其导出到我的公共目录,在本例中为"/i18n/en.user.json".
This will translate my yaml file(s) and export them to my public directory, in this case at '/i18n/en.user.json'.
现在,当angular-translate通过$ http按需上传我配置的i18n设置时,它已经具有解析的YAML,并且避免了必须在前端使用js-yaml(或类似名称)对其进行解析.
Now when angular-translate uploads my configured i18n settings via $http on-demand, it already has the parsed YAML and avoids having to parse it with js-yaml (or similar) on the front end.
这篇关于Webpack-Yaml-> JSON->提取文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!