如何让GitHub忽略Three.js依赖？VSCode配置.gitignore及安装方法

一、VSCode里配置.gitignore忽略node_modules #

操作很简单，跟着步骤来：

• 打开项目根目录（和package.json同级的文件夹）
• 在VSCode左侧文件树右键，选「新建文件」，文件名直接写.gitignore（注意前面的点不能丢）
• 打开这个文件，输入一行内容：node_modules/
• 保存文件后，Git就会自动跳过这个文件夹，不会把它提交到GitHub

二、不通过CDN链接脚本，本地安装使用Three.js #

分两种项目场景说明：

普通HTML/CSS/JS项目 #

1. 先确认项目里有没有package.json，没有的话打开VSCode终端（按Ctrl+调出），输入npm init -y`回车，快速生成配置文件
2. 安装Three.js：终端输入npm install three，等待安装完成
3. 在JS文件里用模块语法导入：

import * as THREE from 'three';

// 正常编写Three.js代码即可，比如初始化场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// ...后续渲染逻辑

4. 注意：HTML中的script标签要加type="module"，否则浏览器无法识别导入语法：

<script type="module" src="./你的js文件名.js"></script>

React项目（Create React App或Vite创建的都适用） #

1. 终端直接运行npm install three安装依赖
2. 在React组件中导入并使用：

import React, { useEffect } from 'react';
import * as THREE from 'three';

function ThreeDemo() {
  useEffect(() => {
    // 在这里编写Three.js初始化逻辑
    const scene = new THREE.Scene();
    // ...其他渲染代码
  }, []);

  return <div id="three-container"></div>;
}

export default ThreeDemo;

三、.gitignore的工作原理 #

本质就是给Git列一份「提交黑名单」：

• 它是Git仓库根目录下的文本文件，Git每次准备提交代码时，会对照这个文件里的规则，把匹配到的文件/文件夹排除在外，不传到远程仓库
• 规则从上到下生效，若出现冲突，后面的规则会覆盖前面的
• 几个常用规则示例：
  • node_modules/：忽略根目录下的整个node_modules文件夹（加斜杠是为了避免匹配子文件夹里的同名目录）
  • *.log：忽略所有后缀为.log的文件
  • !important.log：例外规则，这个文件不被忽略（感叹号表示取消忽略）
• 为啥要忽略node_modules？因为这个文件夹里的依赖包体积大，而且其他人拿到你的代码后，只需运行npm install就能根据package.json重新安装所有依赖，完全没必要传到GitHub占用空间

四、React场景下的.gitignore特殊操作 #

• 用Create React App创建的项目自带.gitignore，里面已经包含了node_modules/、build/等常用忽略项，无需额外修改
• 如果是手动搭建的React项目，只需在.gitignore里添加node_modules/、dist/（Vite项目用）、.env（环境变量文件）这几项即可
• 针对Three.js无需特殊配置，只要node_modules/在忽略列表里，Three.js的依赖文件就不会被提交，其他人拉取代码后运行npm install就能自动安装Three.js

五、Netlify部署小提醒（提前说明） #

• 只要.gitignore配置正确，Netlify部署时会自动运行npm install安装依赖，再执行构建命令（比如React项目的npm run build），不用担心依赖缺失
• 部署时要确保Netlify指向你的构建输出文件夹，比如Create React App的build、Vite的dist

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