json - Webpack - Yaml -> JSON -> 提取文件

Question

我有一个带有一些翻译的 YAML 文件。我需要将这些文件转换为 JSON 文件。我试过使用 yaml-import-loader和 json-loader但我得到一个错误。

这是我的设置:

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 是否存在相同的错误评论与否。

我真的不明白出了什么问题。

版本:
"webpack": "2.6.1",
“提取文本 webpack 插件”:“^3.0.0”，
"json-loader": "^0.5.7",

Answer 1

不确定这是否会对您的情况有所帮助，但我最近找到了解决 i18n 加载问题的方法。我这样做是为了预先将 YAML 提取到 JSON 文件中，因为我使用 angular-translate 并且需要动态和按需加载文件。我避免使用 extract-text-webpack-plugin 并且只使用加载器:file-loader 和 yaml-loader。

首先，我在源代码开头附近设置了我的 .yaml 文件的导入(在我的例子中，一个特定的导入文件链供 webpack 处理)

 import "./i18n/en.user.yaml";

我更新了 webpack 配置以将 YAML 转换为 JSON 并使其可以动态加载(一切都来自我的 'src' 目录，因此是上下文):

 rules: [{
   test: /.\.yaml$/,
   use: [{
     loader: 'file-loader',
     options: {
       name: '[path][name].json',
       context: 'src'
      }
    },{
      loader: 'yaml-loader'
    }]
  }]

这将翻译我的 yaml 文件并将它们导出到我的公共(public)目录，在本例中为“/i18n/en.user.json”。

现在，当 angular-translate 通过 $http 按需上传我配置的 i18n 设置时，它已经有了解析的 YAML，并且避免了在前端使用 js-yaml(或类似的)解析它。