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", "extract-text-webpack-plugin": "^3.0.0", "json-loader": "^0.5.7"

- Got The Fever Media

---

抱歉，可能用词不当。我有一些使用YAML格式的文件进行翻译。这意味着在文件中，我有键/值对，其中键是标识符，而值是实际翻译。所有文件（.en.yml，.es.yml等）都具有相同的键，但具有不同的值。 - Got The Fever Media

你的错误出现在你没有展示的一行代码上。看起来这行代码是extract-text-webpack-plugin的一部分。所以你似乎在使用的模块中遇到了一个错误，应该将其报告为一个bug。除非插件开发人员之一出现，否则你不太可能在这里得到帮助。 - flyx

Answer 1

不确定这是否能帮助您的情况，但我最近找到了解决我的国际化加载问题的方法。我将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文件并将它们导出到我的公共目录，例如在“/i18n/en.user.json”处。

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

- Steve Hynding

Answer 2

这是一个相对较旧的问题，但我在寻找解决方案时发现了它，所以我认为值得参与。

如果您的代码中实际上没有使用翻译文件（即您从未导入和直接使用它们），那么使用Webpack加载器就不是最优雅的解决方案（您将被迫导入它们，以便触发加载器并执行转换）。

另一种选择是使用CopyWebpackPlugin：它支持transform选项，该选项接受一个函数，该函数将文件内容作为缓冲区接收。

通过添加一个YAML解析器（例如js-yaml）作为其他依赖项，将其添加到Webpack配置中即可：

const yaml = require('js-yaml');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // OTHER WEBPACK CONFIG HERE

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'i18n/**/*',
          to: 'i18n/[name].json',
          transform(content) {
            return Buffer.from(
              JSON.stringify(
                yaml.load(content.toString('utf8'), {
                  schema: yaml.JSON_SCHEMA
                })
              ),
              'utf8'
            )
          }
        }
      ]
    })
  ]
}

在上面的示例中，i18n文件夹将包含您的.yml翻译。复制插件会加载它们，将它们转换为JSON，并将它们保存在输出文件夹下的i18n/（由to选项指定）。

- TataBlack

---

这对我非常有效！我必须更新它以使用更新的语法，但概念是相同的。 - Chad Fawcett