时间戳

首页 > 解决方案 > 如何“要求”一个 xml 文件（由 webpack 加载）以读取 javascript 中的 xml 内容

javascript - 如何“要求”一个 xml 文件（由 webpack 加载）以读取 javascript 中的 xml 内容

问题描述

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

参考这篇 webpack 文章：加载数据我遇到问题的一段代码是这样的：

import Data from './data.xml';

我是我自己的测试，我使用的要求形式如下：

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>

标签： javascriptxmlwebpack

解决方案

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

// webpack.config.js

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

现在data在

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

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

推荐阅读