使用 ES6 模块实现加载 JSON 文件

2020-09-29 08:00:00 · 飞浪

在本指南中，您将学习如何通过实现 ES6 标准来访问或使用任何 JSON 文件。

介绍

ES6 是 JavaScript 的通用标准；它也被称为ECMAScript 2015，第一个版本于 2011 年发布。ES6 增加了大量功能，使 JavaScript 应用程序开发更加容易。大多数基于 JavaScript 的框架、库和原生 JavaScript 应用程序都遵循 ECMAScript 标准。在 Web 开发过程中，访问 JSON 文件是一种普通操作，使用 ES6 实现就可以使用 JSON 文件。

在本指南中，您将学习如何通过实现 ES6 标准来访问或使用任何 JSON 文件。

使用 NPM 包导入 JSON 文件

JSON文件包含一个键值对，其中有一个parent键，代表JSON文件的父节点。

在 React 中，如果你想要加载 JSON 文件而不使用现有的 webpack 设置，可以使用第三方 NPM 包。一个流行的包是json-loader。

      npm install json-loader

在本指南中，我们将使用存储在Data.json文件中的示例 JSON 数据。

      {
  "data": {
    "category1": {
      "name": "test123",
      "title": "this is category 123"
    },
    "category2": {
      "name": "test456",
      "title": "this is category 456"
    },
    "category3": {
      "name": "test789",
      "title": "this is category 789"
    }
  }
}
    

创建上述 JSON 文件后，它将可以导入并用于现有的 React 组件。

      import React, { Component } from "react";
// Custom JSON file
import Data from "./data";

export class ImportJsonFile extends Component {
    render() {
        console.log(Data) // will print the JSON file content
        return (
            <>
                <div>
                    // Use JSON data here
                </div>
            </>
        );
    }
}

export default ImportJsonFile;
    

请注意，ES6 import 语句会导入您之前创建的本地 JSON 文件。使用 ES6 import 语句以及json-loader，任何 JSON 文件都可以在 React 应用程序中使用。

使用 Webpack 配置导入 JSON 文件

使用json5-loader 的基本 webpack 配置规则配置如下。

如果您的 React 应用程序使用 webpack 配置版本 > 2.0.0，则无需安装json-loader，因为 webpack在使用 React 应用程序配置时默认使用json5-loader 。

注意： webpack.config.js 来源于这里。

      module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        type: 'javascript/auto',
      },
    ],
  },
};
    

在 webpack 配置文件中，加载器规则接受 NPM 包来加载应用中的任何 JSON 文件。使用的包名为json5-loader。

除了loader规则外，还有另外两个规则，其中一个是test。

      test: /\.json5$/i,

它标识 JSON 的文件格式或在编译时给出警告。

还有一个名为esModule的附加布尔选项，用于定义模块是否应支持 ECMAScript。

esModule的基本设置如下所示。

      module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        options: {
          esModule: true,
        },
        type: 'javascript/auto',
      },
    ],
  },
}
    

通过使用 webpack 维护规则，React 应用程序配置为通过验证其文件扩展名和默认 JSON 加载库从物理应用程序位置访问 JSON 文件。

结论

React 应用程序使用各种 ES6 功能，例如let、const、扩展运算符、箭头函数、类和文字，因此你的应用程序应该配置良好以支持 JSON 文件格式。

Webpack 配置是允许将 JSON 文件导入具有 ES6 实现的 React 应用程序的正确方法，请尝试自行配置 webpack 以访问 JSON 文件。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 ES6 模块实现加载 JSON 文件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ "data": { "category1": { "name": "test123", "title": "this is category 123" }, "category2": { "name": "test456", "title": "this is category 456" }, "category3": { "name": "test789", "title": "this is category 789" } } }

import React, { Component } from "react"; // Custom JSON file import Data from "./data"; export class ImportJsonFile extends Component { render() { console.log(Data) // will print the JSON file content return ( <> <div> // Use JSON data here </div> </> ); } } export default ImportJsonFile;

module.exports = { module: { rules: [ { test: /\.json5$/i, loader: 'json5-loader', options: { esModule: true, }, type: 'javascript/auto', }, ], }, }