Настройка IFC.js с помощью webpack

Я запускаю приложение django и хочу использовать стек frontend, для которого мне нужен бандлер. Я новичок в бандлерах, но решил использовать webpack и пытаюсь настроить IFC.js (https://ifcjs.github.io/info/docs/Hello%20world), следуя руководству hello world, но используя webpack.

Прямо сейчас я сталкиваюсь с ошибкой:

Поле 'browser' не содержит действительной конфигурации псевдонима

но я также не уверен в общей конфигурации моего webpack.

Мой config-файл:

const path = require("path")

module.exports = {
    mode: "development",
    entry: {
        app: "/src/index.ifc.js"
    },
    watch: true,
    devtool: "source-map",
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.ifc.js$/,
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: [
            ".ifc.js"
        ]
    }

Я думаю, что это означает, что все файлы с суффиксом .ifc.js будут скомпилированы при запуске webpack. Я могу заставить его работать, используя простой оператор alert в файле index.ifc.js. Он компилирует его в каталог dist и JS-код выполняется. Но когда я копирую код из учебника hello-world, я получаю:

Поле 'browser' не содержит правильной конфигурации псевдонима /Users/myuser/projectfolder/myproject/myapp/static/node_modules/web-ifc-three/IFCLoader не существует

.

Код, который я использую, скопирован из учебника:

import {
    AmbientLight,
    AxesHelper,
    DirectionalLight,
    GridHelper,
    PerspectiveCamera,
    Scene,
    WebGLRenderer,
  } from "three";
  import {
      OrbitControls
  } from "three/examples/jsm/controls/OrbitControls";

  //Creates the Three.js scene
  const scene = new Scene();

  //Object to store the size of the viewport
  const size = {
    width: window.innerWidth,
    height: window.innerHeight,
  };

  //Creates the camera (point of view of the user)
  const aspect = size.width / size.height;
  const camera = new PerspectiveCamera(75, aspect);
  camera.position.z = 15;
  camera.position.y = 13;
  camera.position.x = 8;

  //Creates the lights of the scene
  const lightColor = 0xffffff;

  const ambientLight = new AmbientLight(lightColor, 0.5);
  scene.add(ambientLight);

  const directionalLight = new DirectionalLight(lightColor, 1);
  directionalLight.position.set(0, 10, 0);
  directionalLight.target.position.set(-5, 0, 0);
  scene.add(directionalLight);
  scene.add(directionalLight.target);

  //Sets up the renderer, fetching the canvas of the HTML
  const threeCanvas = document.getElementById("three-canvas");
  const renderer = new WebGLRenderer({
      canvas: threeCanvas,
      alpha: true
  });

  renderer.setSize(size.width, size.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  //Creates grids and axes in the scene
  const grid = new GridHelper(50, 30);
  scene.add(grid);

  const axes = new AxesHelper();
  axes.material.depthTest = false;
  axes.renderOrder = 1;
  scene.add(axes);

  //Creates the orbit controls (to navigate the scene)
  const controls = new OrbitControls(camera, threeCanvas);
  controls.enableDamping = true;
  controls.target.set(-2, 0, 0);

  //Animation loop
  const animate = () => {
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  };

  animate();

  //Adjust the viewport to the size of the browser
  window.addEventListener("resize", () => {
    size.width = window.innerWidth;
    size.height = window.innerHeight;
    camera.aspect = size.width / size.height;
    camera.updateProjectionMatrix();
    renderer.setSize(size.width, size.height);
  });


  import { IFCLoader } from "web-ifc-three/IFCLoader";

  // Sets up the IFC loading
  const ifcLoader = new IFCLoader();

  const input = document.getElementById("file-input");
  input.addEventListener(
    "change",
    (changed) => {
      const file = changed.target.files[0];
      var ifcURL = URL.createObjectURL(file);
      ifcLoader.load(
            ifcURL,
            (ifcModel) => scene.add(ifcModel));
    },
    false
  );

Структура моего проекта:

├──myapp
    ├── static
       ├── dist
       ├── node_modules
       ├── src
          ├── index.ifc.js
       ├── webpack.config.js

В модулях node_modules есть дир web-ifc-three, который имеет следующую структуру:

├── IFC
│   ├── BaseDefinitions.d.ts
│   ├── components
│   │   ├── BvhManager.d.ts
│   │   ├── IFCElementsMap.d.ts
│   │   ├── IFCManager.d.ts
│   │   ├── IFCModel.d.ts
│   │   ├── IFCParser.d.ts
│   │   ├── IfcTypesMap.d.ts
│   │   ├── IfcUtils.d.ts
│   │   ├── MemoryCleaner.d.ts
│   │   ├── TypeManager.d.ts
│   │   ├── properties
│   │   │   ├── BaseDefinitions.d.ts
│   │   │   ├── BasePropertyManager.d.ts
│   │   │   ├── JSONPropertyManager.d.ts
│   │   │   ├── PropertyManager.d.ts
│   │   │   └── WebIfcPropertyManager.d.ts
│   │   └── subsets
│   │       ├── ItemsMap.d.ts
│   │       ├── SubsetCreator.d.ts
│   │       ├── SubsetManager.d.ts
│   │       └── SubsetUtils.d.ts
│   ├── indexedDB
│   │   └── IndexedDatabase.d.ts
│   └── web-workers
│       ├── BaseDefinitions.d.ts
│       ├── IFCWorker.d.ts
│       ├── IFCWorkerHandler.d.ts
│       ├── handlers
│       │   ├── ParserHandler.d.ts
│       │   ├── PropertyHandler.d.ts
│       │   ├── WebIfcHandler.d.ts
│       │   └── WorkerStateHandler.d.ts
│       ├── serializer
│       │   ├── FlatMesh.d.ts
│       │   ├── FlatMeshVector.d.ts
│       │   ├── Geometry.d.ts
│       │   ├── IfcGeometry.d.ts
│       │   ├── Material.d.ts
│       │   ├── Mesh.d.ts
│       │   ├── Serializer.d.ts
│       │   └── Vector.d.ts
│       └── workers
│           ├── ParserWorker.d.ts
│           ├── PropertyWorker.d.ts
│           ├── StateWorker.d.ts
│           └── WebIfcWorker.d.ts
├── IFCLoader.d.ts
├── IFCLoader.js
├── IFCLoader.js.map
├── IFCWorker.js
├── IFCWorker.js.map
└── package.json

Я уже пытался добавить расширения в импорт и пробовал понизить модуль three.js, как рекомендовано здесь Build fails because a path to a three directory cannot be loaded, но успеха нет

Возможно, в конфигурации есть что-то принципиально неправильное, поскольку node-модули действительно существуют.

Любая помощь, как правильно настроить это, будет очень признательна.

Edit: Теперь я сомневаюсь, что проблема в моем конфиге webpack, так как выполнение всего с rollup, как указано в руководстве, также дает аналогичную ошибку

Вернуться на верх