6

我正在尝试使用以下命令从 .tsx 中的 .json 文件导入数据：

import data from "data/mockup.json"

但我得到了错误

找不到模块'data/mockup.json'

我的 webpack 配置如下所示：

const babelLoader = {
    loader: 'babel-loader',
    options: {
        cacheDirectory: true,
        presets: [
            ["@babel/preset-env", {
                "targets": {
                    "browsers": ["last 2 versions", "safari >= 7"]
                },
                "modules": true
            }]
        ]
    }
};

module.exports = {
    entry: {...},
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json'],
        alias: {
            data: path.resolve(__dirname, 'src/app/data')
        }
    },
    output: {...},
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    babelLoader,
                    {
                        loader: 'ts-loader'
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
                use: [
                    babelLoader
                ]
            }
        ]
    },
    ...
}
enter code here

我认为 .json 默认情况下是内置在 webpack4 中的，所以我的 webpack 配置可能有问题？

使用的版本：webpack：v4.4.1 打字稿：2.7.2

4

3 回答 3

5

在 d.ts 文件中声明模块

declare module "*.json"

在编译器选项的 tsconfig.json 中添加一个字段

"typeRoots": [ "node_modules/@types", "./typings.d.ts" ],

现在导入文件（.tsx）

import * as data from "./dat/data.json";

Webpack@4.4.1 和 Typescript@2.7.2

希望这可以帮助！！！

参考 1：https ://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Ref2：https ://github.com/Microsoft/TypeScript-React-Starter/issues/12

于 2018-05-05T14:57:41.050 回答
2

尽管答案有助于将 JSON 文件作为模块加载，但它们在许多方面都受到限制

  • 第一：打字稿默认可以加载JSON文件，您只需要添加到tsconfig.json以下行：

     {
    ...

    "resolveJsonModule": true,

    ...
 }

  • 第二：建议的解决方案将隐式启用类型检查和自动完成

在此处输入图像描述

PS 所附图片来自一个讨论相同主题的教程点击这里查看更多

于 2019-12-27T23:41:53.080 回答
1

个人而言，取消注释：

    "allowSyntheticDefaultImports": true   /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,

在文件tsconfig.json中成功了。

我在这里找到了提示。

于 2020-02-20T22:52:52.477 回答