NPM初始化的Three.js项目代码存放位置及编译部署命令是什么

你当前只执行了基础初始化和Three.js安装，没有强制的目录规则，按照通用前端项目约定和生产部署要求，两个问题的解答如下：

• 直接在项目根目录新建src文件夹，所有调用Three.js的业务逻辑代码全部放在这个目录下，项目入口脚本建议命名为src/main.js，在这个文件头部写import * as THREE from 'three'就能正常引入Three.js的所有API开发业务功能。
• 项目根目录放入口页面index.html，不要把大量Three.js逻辑直接堆在html的内联script标签里，后期迭代维护会很麻烦。
• 要是你临时想本地跑个demo不想配构建，也可以直接把js文件放根目录用ES模块方式引入依赖，但这种写法直接部署会出现跨域、路径匹配、依赖加载失败的问题，绝对不要直接用到生产环境。

你当前用npm init生成的原生项目没有内置任何构建能力，没法直接产出可部署的编译产物，需要先配个轻量构建工具，操作很简单：

1. 先安装开发依赖Vite，执行命令：npm install -D vite，这个工具对Three.js项目适配很好，配置量极小、构建速度快，适合小型静态站点。
2. 打开根目录下的package.json文件，替换原有scripts字段为如下配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

3. 检查根目录index.html里的脚本引入标签，要加type="module"属性，路径指向你的入口js文件，示例：

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

4. 需要编译构建生产产物的时候，直接在项目根目录执行npm run build即可。命令执行完成后会在根目录生成dist文件夹，把这个文件夹里的所有文件完整复制到web服务器的public_html目录下，就能直接对外提供访问了。

补充：执行npm run dev可以启动本地开发服务器，改代码会自动热更新，不用手动刷新页面，开发阶段用这个命令就行。

内容的提问来源于stack exchange，提问作者Anna