使用 Webpack 4 在 Javascript 中导入 JSON 文件

Posted 2023-02-22

【中文标题】使用 Webpack 4 在 Javascript 中导入 JSON 文件

【英文标题】：Import JSON file in Javascript using Webpack 4

【发布时间】：2019-08-08 19:57:57

【问题描述】：

我有一个名为 generic-map.json 的文件，其中包含以下内容：

[
    
        "names": ["text", "description"],
        "map": 
            "name": "textContent",
            "target": "property",
            "type": "string"
        
    ,
    
        "names": ["checked"],
        "map": 
            "name": "checked",
            "target": "property",
            "type": "boolean"
        
    ,
    
        "names": ["disabled", "readonly"],
        "map": 
            "name": "disabled",
            "target": "property",
            "type": "boolean"
        
    ,
    
        "names": ["title", "tooltip"],
        "map": 
            "name": "title",
            "target": "property",
            "type": "string"
        
    ,
    
        "names": ["cssclass", "classname"],
        "map": 
            "name": "",
            "target": "classList",
            "type": "string"
        
    ,
    
        "names": ["tabindex"],
        "map": 
            "name": "tabIndex",
            "target": "attribute",
            "type": "string"
        
    
]

在 javascript 文件中，我尝试导入此文件：

import generic from './generic-map.json';

Webpack 给了我以下错误：

./src/utils/property-mapping/generic-map.json
Module parse failed: Unexpected token ; in JSON at position 733 while parsing near '...type": "string"  ];'
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token ; in JSON at position 733 while parsing near '...type": "string"  ];'
    at JSON.parse (<anonymous>)

我知道 webpack 不再需要 json-loader，从 Webpack 版本 2.0.0 开始。我正在使用 Webpack 4.20.2。

这是我的加载器配置的样子：

[
    test: /(\.js)/,
    exclude: /(node_modules)/,
    loaders: ['babel-loader'],
, 
    test: /(\.jpg|\.png)$/,
    loader: 'url-loader?limit=10000',
]

【问题讨论】：

您是否尝试添加文件加载器规则？像' type: 'javascript/auto', test: /\.(json)/, exclude: /(node_modules|bower_components)/, 使用：[ loader: 'file-loader', options: name: '[ name].[ext]' , ], '

您的 JSON 文件末尾是否有恶意分号？

@madebydavid 不，JSON 文件绝对正确。

【参考方案1】：

将test: /(\.js)/ 替换为test: /\.js$/ 或test: /\.jsx?$/

由于测试表达式错误，babel-loader 处理一个 .json 文件。