Webpack-ში JSON-ის იმპორტირება TypeScript-ში არ იმპორტირებს შინაარსს, არამედ URL-ს

მე ვცდილობ TypeScript-ში JSON ფაილის შინაარსის იმპორტს, მაგრამ JSON-ის შინაარსის ნაცვლად ვიღებ მის URL-ს.

App.tsx

import * as videosInfo from './videos-info.json'

console.log("Print");
console.log(videosInfo);

კონსოლის გამოტანა:

Print
http://localhost:3000/src/videos-info.json

ფაილში tsconfig.json მე ვიყენებ "resolveJsonModule": true. როგორ შემიძლია JSON-ის შინაარსის გამოყენება და არა მისი გზის?

რედაქტირება: აქ არის ჩემი webpack.config.js რეფერენციისთვის:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.json/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext][query]'
        }
      },
      { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'client.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    compress: true,
    port: 3000
  }
};

პასუხი #1

როგორც @T.J. Crowder სამართლიანად აღნიშნა, პრობლემა წარმოშობილია ჩემს არასწორ გაგებაში asset/resource გამტარიზე Webpack 5-ში. დოკუმენტაციის მიხედვით:

asset/resource გამოყოფს ცალ ფაილს და აკეთებს URL-ის ექსპორტს. წინა ეს შესაძლებელი იყო file-loader-ის გამოყენებით.

ჩემი მიზანია, რომ აქ videos-info.json ჩავწერო /src/-დან /dist საქაღალდეში, როცა ვაკეთებ npm run build, რათა შემეძლოს მისი სტატიკურად გამოქვეყნება და AWS Lambda-ს დაყენება, რომ პერიოდულად მას გადააფაროს. ამიტომ, მე ვერ ვითვალისწინებ JSON-ს client.bundle.js-ში Webpack-ის საშუალებით, რადგან მონაცემები ბანდლში სახელმძღვანელო კოდით იქნება ჩაწერილი. ეს შენიშვნა იმასთან დაკავშირებით, თუ როგორ ქმნის Webpack რესურსებს სტატიკურად, დამეხმარა უკეთ გაგებაში: https://stackoverflow.com/a/44424933/9698467

ამიტომ მე მეთვითნებურად უნდა გამოვიყენო asset/resource ლოუდერი Webpack 5-ში URL-ის გენერირებისთვის, რომელიც შემდგომში შემიძლია დავიტვირთო ვებსაიტზე, მაგალითად, React hook-ის მეშვეობით:

const videosFile = require('./videos-info.json');
// videosFile is a URL

React.useEffect(() => {
  const resp = await fetch(videosFile);
  const data = await resp.json() as VideoResult;
  const videos: VideoResultItem[] = data.items;
}, []);