Question

我设置了一个标准的webpack环境，我正在使用带有npm个包的ES6导入（通常为import name from 'package'）。我使用webpack-dev-server作为我的开发环境，使用标准webpack构建构建输出目录。

我的源代码中有一个包含大量XML文件的zip文件，在我的JS程序中，我希望能够读取该zip文件，并能够从中提取单个文件，这样我就能得到这些文件中的文本并处理其中的XML。

我目前正在使用xmldoc包将XML文本转换为JSON对象进行处理，但我无法找到一个可靠的包读取zip文件（使用文件的路径）并能够获取其中的单个文件。在我尝试的那些中，我遇到了node fs模块的问题。如果我尝试将target: 'node'属性添加到我的webpack配置文件中，则会收到一条错误，指出require is not defined。

是否有可靠的npm软件包兼容ES6导入，可以将zip文件读入我的程序？我意识到这意味着zip必须包含在要发送到浏览器的构建文件中，但这比包含数百个单独的文件而不压缩它们更好。谢谢！

Answer 1

我认为您想要browserfs。这是自述文件中的示例代码。您还需要对webpack进行一些配置（检查自述文件）：

import React from "react";
import './DetailPage.css'

class DetailPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breweries: [],
      brewery: []
    };
  }

  componentDidMount() {
    const { id } = this.props.match.params;
    fetch(`https://api.openbrewerydb.org/breweries/${id}`)
      .then(response => response.json())
      .then(data => {
        this.setState({
          brewery: data
        });
      });
    fetch("https://api.openbrewerydb.org/breweries")
        .then(response => response.json())
        .then((data) => {
          this.setState({
            breweries: data,
          })
        })
  }

  render() {
    const { brewery } = this.state;
    return(
    <div className="background">
      <div className="details">
          <p>Name: {brewery.name}</p>
          <p>Category: {brewery.brewery_type}</p>
          <p>Address: {brewery.street}, {brewery.city}, {brewery.state}, {brewery.postal_code}, {brewery.country}</p>
          <p>Phone Number: {brewery.phone}</p>
          <p>Website: <a href={brewery.website_url} target="_blank">{brewery.website_url}</a></p>
      </div>
      <div className="recommendations">Recommendations</div>
      <div>
      <div className="row">
        {this.state.breweries.slice(0.10).map((brewery, i) =>
          <div className="col-xs-12 col-sm-4" key={i}>
              <div className="card">
                <div className="card-description">
                  <h2>{brewery.brewery_type}</h2>
                  <p>{brewery.city}, {brewery.state}</p>
                </div>
                <div className="card-category">{brewery.name}</div>
              </div>
          </div>
        )}
      </div>
      </div>
    </div>
    )
  }
}

export default DetailPage;

使用Webpack导入zip文件并在其中获取单个文件

1 个答案: