acr*_*ene 5 javascript node.js three.js webpack webpack-dev-server
我根据手册https://threejs.org/docs/#manual/en/introduction/Import-via-modules将 Three.js 库作为模块运行时遇到问题
这就是我所做的：
创建 package.json
npm init
安装 webpack
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
这给了我错误：
未捕获的类型错误：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头。
但是，它使用此语法提供完整路径：
import * as THREE from '../node_modules/three/build/three.module.js';
为什么 webpack 没有解析到我的 node_modules 的路径？
我也试过创建一个webpack.config.js文件：
module.exports = {
resolve: {
modules: ['./node_modules']
}
};
但结果相同：
未捕获的类型错误：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头。
任何提示都非常感谢！
更新：
我尝试使用 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"
]
}
但还是没有成功
您可以将 Three.js 与 ES6 模块和浏览器中的 npm 结合使用，无需 webpack 或任何其他捆绑包，方法如下：
npm install three
打开一个 HTML 页面，并链接到一个type="module"脚本：
<script type="module" src="./main.js"></script>
您必须main.js按照以下格式编写：
import * as THREE from './node_modules/three/src/Three.js';
这会起作用。请注意，导入语句必须采用这种形式，指向文件，并带有./和.js。
| 归档时间： |
|
| 查看次数： |
5785 次 |
| 最近记录： |