Javascript 网页包无法解析并指向我的节点\u模块_Javascript_Node.js_Webpack_Three.js_Webpack Dev Server

Javascript 网页包无法解析并指向我的节点\u模块

javascript node.js webpack three.js

Javascript 网页包无法解析并指向我的节点\u模块,javascript,node.js,webpack,three.js,webpack-dev-server,Javascript,Node.js,Webpack,Three.js,Webpack Dev Server,根据手册，我无法将Three.js库作为一个模块运行这就是我所做的：创建package.json npm init 安装网页包 npm i --save-dev webpack webpack-cli 安装三个.js npm install three 使用以下代码创建index.html <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cloth

根据手册，我无法将Three.js库作为一个模块运行

这就是我所做的：

创建package.json

npm init

安装网页包

npm i --save-dev webpack webpack-cli

安装三个.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>

import * as THREE from 'three';

安装liveserver以运行服务器：

npm install live-server -g

live-server

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

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

运行服务器：

npm install live-server -g

live-server

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

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

这给了我一个错误：

npm install live-server -g

live-server

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

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

未捕获类型错误：解析模块说明符“三”失败。相对引用必须以“/”、“/”或“./”开头

但是，它可以使用提供完整路径的语法：

npm install live-server -g

live-server

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

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

为什么webpack不能解析到我的节点模块的路径

我还尝试创建了一个webpack.config.js文件：

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

但同样的结果是：

未捕获类型错误：解析模块说明符“三”失败。相对引用必须以“/”、“/”或“./”开头

任何提示都是非常感谢的

更新：

npm install live-server -g

live-server

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

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

我试着用Babel来处理ES6：

安装：

npm install live-server -g

live-server

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

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

根据以下内容编辑y webpack.config.js:

添加了以下内容的LRC：

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

但是仍然没有成功

您可以在浏览器中将three.js与ES6模块和npm一起使用，而无需webpack或任何其他捆绑包，方法如下：

npm install three

打开一个HTML页面，并链接到

type=“module”

脚本：

  <script type="module" src="./main.js"></script>

这就行了。注意，import语句必须采用这种形式，指向文件，使用

和

.js

我也反对这个错误

我只想要一个简单的

import*作为“三”中的三个
我使用bundler网页包
这是我的简单配置
const path = require('path');

module.exports = {
  mode:'development',  
  entry: './src/main.js',
  watch: true,
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
};

在我的index.html中，我将dist的路径放在脚本标记中
 <script type="module" src="../dist/main.js"></script>

如果这是一个节点项目，请尝试使用const THREE=require（'THREE'）
，而不是node，因为还没有JavaScript引擎本机支持es6模块@william所说的。您需要安装@babel/core和babel-loader，然后在webpack.config.json中配置babel-loader。如果您想使用es6，您可能需要创建一个.babelrc。不过，谢谢constthree=require（'THREE'）
给了我一个错误消息：index.js:3 Uncaught ReferenceError:require没有定义。。。我试着用以下方法安装巴贝尔：npm安装——保存dev@babel/core@babel/preset env
和npm安装——保存dev-babel-loader
，但这也不起作用。与之前相同的错误消息：未捕获类型错误：无法解析模块说明符“三”。相对引用必须以“/”、“/”或“./”开头。请参阅上面的更新。为什么它不是一个简单的asimport*as THREE from'THREE'？？这不起作用-路径现在是./node_modules/three/build/three.js。但这也不起作用…抛出一个MIME类型错误。