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”，

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并让它可以动态加载（一切都来自我的＆＃39; src＆＃39;目录，因此是上下文）：

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

这将翻译我的yaml文件并将它们导出到我的公共目录，在本例中为＆＃39; /i18n/en.user.json'。

现在，当angular-translate通过$ http on-demand上传我配置的i18n设置时，它已经有了解析的YAML并且避免了必须用前端的js-yaml（或类似）解析它。

Answer 2

一个相对较老的问题，但是我在寻找相同问题的解决方案时找到了，所以我认为值得一试。

如果您并没有真正在代码中使用翻译文件（即您从未import直接使用它们），那么使用Webpack加载器并不是最优雅的解决方案（您将不得不导入它们以便可以触发加载程序并执行转换。）

一种替代方法是改为使用CopyWebpackPlugin：它支持transform option，该方法将接收文件内容的功能作为缓冲区。

使用YAML解析器（如js-yaml）作为附加依赖项，可以将其添加到Webpack配置中：

const yaml = require('js-yaml');

module.exports = {
  // OTHER WEBPACK CONFIG HERE

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

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

Webpack - Yaml - ＆gt; JSON - ＆gt;解压文件

2 个答案: