Javascript 正确使用；三、module.js“；？

我正在努力学习如何使用模块。我想我会从最简单的开始，但我已经有了问题，它不想运行。我不得不忽略一些重要的事情，但我就是看不到什么。 包含“three.module.js”或以“module”的形式执行脚本都不起作用。 有没有人有一个有效的例子？ 我从以下方面得到了这个例子：

如果我在本地做，为什么不起作用

<script type="module">

    import * as THREE from "lib/three.module.js";
            
    var camera, scene, renderer;            
    var mesh;
            
    init();         
    animate();
            
    function init() {
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );                
        camera.position.z = 400;
        scene = new THREE.Scene();
        var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );                
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
                
        mesh = new THREE.Mesh( geometry, material );                
        scene.add( mesh );
                
        renderer = new THREE.WebGLRenderer( { antialias: true } );       
        renderer.setPixelRatio( window.devicePixelRatio );              
        renderer.setSize( window.innerWidth, window.innerHeight );      
        document.body.appendChild( renderer.domElement );
                
        window.addEventListener( 'resize', onWindowResize, false );
    }
            
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;             
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
            
    function animate() {
        requestAnimationFrame( animate );
        mesh.rotation.x += 0.005;               
        mesh.rotation.y += 0.01;
        renderer.render( scene, camera );
    }
</script>

从“lib/THREE.module.js”中将*作为三导入；
摄像机、场景、渲染器；
var网格；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
场景=新的三个。场景（）；
var几何体=新的三个.BoxBufferGeometry（200200200）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
网格旋转.x+=0.005；
网格旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
}

好的，我在过去两天里进行了深入的研究。“导出/导入”只能通过http工作，不能与本地目录一起工作。因此，您必须设置自己的服务器。我目前使用的另一种选择是捆绑机。包裹与我的平板电脑不兼容，但网页包运行良好。为此，我首先必须安装一个终端。我选择了termux。然后我通过termux安装了node.js（v12.18.3），然后是webpack。起初，这对我来说似乎是一个巨大的努力，但在你完成所有一次之后，它似乎不再那么糟糕了。重要的一点！为了访问设备中的SD卡，必须在android上的app manager中配置Termux。默认情况下，如果要使用“cd/sdcard/”访问内部内存，则禁止访问，然后命令行显示“权限被拒绝”

我用编辑器正常创建了这个项目，你不需要终端。然后，在进入termux中的项目目录后，termux只需要运行带有“npx webpack”的webpack

我的第一个例子：

//path-structure

webpack-demo
|
|_page.html
|_webpack.config.js
|_src
   |_index.js
   |_bar.js

软件来源：

termux：从google play安装

node.js：

网页：

---

现在我很满意了，因为现在我可以编写结构合理的javascript代码了。好的，我在过去两天里进行了深入的研究。“导出/导入”只能通过http工作，不能与本地目录一起工作。因此，您必须设置自己的服务器。我目前使用的另一种选择是捆绑机。包裹与我的平板电脑不兼容，但网页包运行良好。为此，我首先必须安装一个终端。我选择了termux。然后我通过termux安装了node.js（v12.18.3），然后是webpack。起初，这对我来说似乎是一个巨大的努力，但在你完成所有一次之后，它似乎不再那么糟糕了。重要的一点！为了访问设备中的SD卡，必须在android上的app manager中配置Termux。默认情况下，如果要使用“cd/sdcard/”访问内部内存，则禁止访问，然后命令行显示“权限被拒绝”

我用编辑器正常创建了这个项目，你不需要终端。然后，在进入termux中的项目目录后，termux只需要运行带有“npx webpack”的webpack

我的第一个例子：

//path-structure

webpack-demo
|
|_page.html
|_webpack.config.js
|_src
   |_index.js
   |_bar.js

软件来源：

termux：从google play安装

node.js：

网页：

---

现在我很满意，因为现在我可以编写结构正确的javascript代码了。在尝试这段代码时，您可以分享在JS控制台中看到的具体错误吗？您的代码看起来不错，您链接到的示例是一个工作示例，因此您的完整HTML文件或您在本地托管代码的方式可能有问题。如果您使用

import*as THREE from“https://threejs.org/build/three.module.js“

？我已经测试了您的方案，然后它会再次工作。因此，它与我包含“three.module.js”的地方有所不同。区别在哪里？在尝试这段代码时，您能分享您在JS控制台中看到的具体错误吗？您的代码看起来不错，您链接到的示例是一个工作示例，因此您的完整HTML文件或您在本地托管代码的方式可能有问题。如果您使用

import*as THREE from“https://threejs.org/build/three.module.js“

？我已经测试了您的方案，然后它会再次工作。因此，它与我包含“three.module.js”的地方有所不同。区别在哪里？

//webpack.config.js
const path = require('path'); 
module.exports = { 
//mode: 'development',
mode: 'production',
entry: './src/index.js', 
output: { path: path.resolve(__dirname, 'dist'), 
filename: 'bundle.js' } 
};

//index.js
import bar from './bar'; 
bar();

//bar.js
export default function bar() { 
 
document.getElementById("message").innerHTML = "Hello World";
}