Webpack не может разрешить и указать на мои node_modules - PullRequest
Новая
       24

Webpack не может разрешить и указать на мои node_modules

0 голосов
/ 27 октября 2019

У меня проблемы с запуском библиотеки Three.js в качестве модуля в соответствии с руководством https://threejs.org/docs/#manual/en/introduction/Import-via-modules

Вот что я сделал:

Создание package.json 

npm init

Установить веб-пакет 

npm i --save-dev webpack webpack-cli

Установить Three.js 

npm install three

Создатьindex.html со следующим кодом 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - cloth simulation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #cce0ff;
            color: #000;
        }

        a {
            color: #080;
        }
    </style>
</head>

<body>
    <script type="module" src="./src/index.js"></script>
</body>

</html>

Создайте папку src и поместите файл с именем index.js в папку src, куда я импортирую три 

import * as THREE from 'three';

Установка liveserver для запуска сервера: 

npm install live-server -g

Запуск сервера: 

live-server

Это дает мнеошибка:

Uncaught TypeError: Не удалось разрешить спецификатор модуля «три». Относительные ссылки должны начинаться с "/", "./" или "../".

Однако он работает с этим синтаксисом, предоставляя полный путь: 

import * as THREE from '../node_modules/three/build/three.module.js';

Почему webpack не разрешает путь к моим node_modules?

Я также пытался создать файл webpack.config.js : 

module.exports = {
    resolve: {
        modules: ['./node_modules']
    }
};

Но с тем же результатом:

Uncaught TypeError: Не удалось разрешить спецификатор модуля «три». Относительные ссылки должны начинаться с "/", "./" или "../".

Любая подсказка очень ценится!

ОБНОВЛЕНИЕ:

Я пробовал с Babel для обработки ES6:

Установка: 

npm install --save-dev @babel/core @babel/preset-env 
npm install --save-dev babel-loader

Отредактировано y webpack.config.js согласнок этому: https://createapp.dev/webpack

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

module.exports = config;

Добавлено .babelrc с: 

{
    "presets": [
        "@babel/preset-env"
    ]
}

Но все равно безуспешно

...