Webpack5 实现数据加载与自定义 JSON 模块

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

如何利用 Webpack 加载数据

我们之前已经实现图片、图标、字体、字符串等等的加载，这些都属于数据。其实除了这些数据意外，还有类似于 JSON 文件，CSV、TSV 和 XML等等。

对于 JSON 文件，Webpack 提供直接支持，对于CSV、TSV 和 XML 文件，需要借助 loader 才能处理他们。

npm install --save-dev csv-loader xml-loader

loader 安装成功之后，需要我们在项目的 webpack.config.js 配置文件中配置。

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//...
module.exports = {
    //...
    plugins: [
        //...
        new MiniCssExtractPlugin({
          filename:'style/[contenthash].css',
        }),
    ],


  //...


    module: {
        rules: [
             //...
              {
                test: /.(csv|tsv)$/i,
                use: ['csv-loader'],
              },
              {
                test: /.xml$/i,
                use: ['xml-loader'],
              },
        ]
    }
}

编译打包，启动服务，在浏览器访问：http://localhost:8080/index_app.html。查看开发者工具中的控制台，你应该能够看到导入的数据会被打印出来！

自定义 JSON 模块 parser

通过使用自定义 parser 替代特定的 webpack loader，可以将任何 toml、yaml 以及 json5 文件作为 JSON 模块导入。

yaml 文件：实际项目过程中经常的看到这种格式的文件，特别做后端开发的。yaml 是一种以数据为中心的文件格式。相比于传统的json、xml格式的文件，它能够以更简洁的语法来记录数据。yaml 文件最基本的格式是键值对，即 key： value。注意冒号和value直接必须有一个空格隔开。yaml 的键值对是可以嵌套的，即 value 也可以是一个键值对。
toml 文件：它彻底放弃了括号或缩进的底层原理，而是采取了显式键名链的方式。
JSON5 文件：JSON5是JSON的一个扩展子集。因此它完全兼容老JSON，并且还有自己独有的特性，包括支持注释、不强求双引号，可以使用单引号、键值对的键可以不用双引号括起来以及允许最后一个元素还可以跟加逗号

首先，需要在本地安装 toml，yamljs 和 json5 的依赖包：

npm install toml yamljs json5 --save-dev

修改项目的 webpack.config.js 配置文件，配置 toml、yaml 和 json5 规则：

// webpack.config.js
//...
const toml = require('toml');


const yaml = require('yamljs');


const json5 = require('json5');


module.exports = {
    //...
    module: {
        rules: [
        // ...
          {
                test: /.toml$/i,
                type: 'json',
                parser: {
                  parse: toml.parse,
                },
              },
              {
                test: /.yaml$/i,
                type: 'json',
                parser: {
                  parse: yaml.parse,
                },
              },
              {
                test: /.json5$/i,
                type: 'json',
                parser: {
                  parse: json5.parse,
                },
            }
        ]
    }
}

接着，在我们的项目中新增 .toml、yaml 以及 .json5 格式的源文件。

// src/assets/data.toml
title = "TOML Example"


[owner]
name = "Tom Preston-Werner"
organization = "GitHub"
bio = "GitHub Cofounder & CEO\nLikes tater tots and beer."
dob = 1979-05-27T07:32:00Z

title: YAML Example
owner:
  name: Tom Preston-Werner
  organization: GitHub
  bio: |-
    GitHub Cofounder & CEO
    Likes tater tots and beer.
  dob: 1979-05-27T07:32:00.000Z

// src/assets/data.json5
{
  // comment
  title: 'JSON5 Example',
  owner: {
    name: 'Tom Preston-Werner',
    organization: 'GitHub',
    bio: 'GitHub Cofounder & CEO\n\
Likes tater tots and beer.',
    dob: '1979-05-27T07:32:00.000Z',
  },
}

那么，如何才能在我们的浏览器的开发者工具打印这三个文件呢，需要在 /src/index.js 中引入这三个文件。

import toml from './assets/data.toml';
import yaml from './assets/data.yaml';
import json from './assets/data.json5';


console.log(toml.title); // output `TOML Example`
console.log(toml.owner.name); // output `Tom Preston-Werner`


console.log(yaml.title); // output `YAML Example`
console.log(yaml.owner.name); // output `Tom Preston-Werner`


console.log(json.title); // output `JSON5 Example`
console.log(json.owner.name); // output `Tom Preston-Werner`