javascript - 如何 'require' 一个 xml 文件(由 webpack 加载)以读取 javascript 中的 xml 内容

Question

我使用 webpack 作为应用程序的 bundler ，并使用 XML 文件进行配置。目前我正在编写测试以从 webpack 打包的 XML 文件中检索配置。

引用这篇 webpack 文章:Loading data我遇到麻烦的代码是这样的:

import Data from './data.xml';

我是自己测试的，我用的是require形式，如下:

const select = require('xpath.js');
const DOMParser = require('xmldom').DOMParser
const parser = new DOMParser();
const data = require('./app.config.xml'); // <- THIS IS MY PROBLEM
const xdocument = parser.parseFromString(data.toString(), 'text/xml');

“require”如何用于 XML 文件？

这段代码:

console.log("DATA: " + data.toString());

产生这个输出:

DATA: [object Object]

所以我不知道 require 正在创建什么对象。

我看过很多关于将 xml 读入 JSON 的其他代码示例，但我不知道必须用什么来处理 JSON 对象。我想将 XML 作为 XMLObject 进行查询，以便可以对其运行 xpath 查询。

我可以通过运行轻松地获取 JSON

JSON.stringify(data)

显示如下内容:

    {"Application":{"$":{"name":"config-data"},"Imports":[{"Import":[{"$":{"from":"./another.config.xml"}}]}],"Con

which is not what I want. So how can I get the XML content from *data* as a string, which is what **parser.parseFromString** needs?

我的测试代码如下:

  describe.only('xpath examples (zenobia)', async assert => {
    const xdoc = require('./app.config.xml');

    let applicationNodes = select(xdoc, "/Application"); // THIS RETURNS a DOMObject
    console.log(`Found ${applicationNodes.length} Application elements`);

    assert({
      given: 'an inline xml document with an Application',
      should: 'Select an element from the root',
      condition: applicationNodes !== null
    });
  });

该日志消息显示:

Found 0 Application elements

对于这样的 XML 文档:

<?xml version="1.0"?>
<Application name="app">
  <Imports/>
</Application>

Answer 1

如果您想将 XML 文件作为字符串读取，您可以简单地使用 Webpack raw-loader具有以下配置

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.xml$/i,
        use: 'raw-loader',
      },
    ],
  },
};

现在数据在

const data = require('./app.config.xml');

应该是来自 XML 文件的原始数据(即字符串)- 您的其余代码现在应该可以按预期工作