如何用Webpack打包Three.js TypeScript插件并排除Three.js核心代码？

这个场景我太熟悉了——既要让TypeScript能正确识别Three.js的类型，又不能把整个库打包进你的插件里，给你几个最实用的解决方案：

方案一：使用TypeScript类型专属导入（Type-Only Imports） #

这是TS 3.8版本后推出的特性，专门解决「只需要类型，不需要打包实际代码」的问题。你只需要把原来的导入语句改成类型导入：

import type * as THREE from "three";

export default class MyPlugin{
  public something: THREE.Quaternion; // 仅作为类型引用，完全适配这个方案
}

• 原理：TypeScript在编译时会完全移除import type相关代码，打包工具（比如Webpack）根本看不到这个导入，自然不会把Three.js打包进来。
• 注意：这个方案只适用于你仅用Three.js做类型标注的情况，如果代码里有实际调用Three.js的API（比如new THREE.Mesh()），就不能用这个方法了，得看下面的方案。

方案二：配置Webpack的externals声明外部依赖 #

如果你的插件需要调用Three.js的实际API，但又不想把它打包进去，可以告诉Webpack：Three.js是外部依赖，运行时会由用户环境提供。

1. 修改webpack.config.js，添加externals配置：

module.exports = {
  // 其他配置...
  externals: {
    three: 'THREE' // 表示打包时遇到import 'three'，会替换成全局变量THREE
  }
};

2. 你的TS代码还是正常导入：

import * as THREE from "three";

export default class MyPlugin{
  public something: THREE.Quaternion;
  // 即使有实际API调用也没问题：
  public createVector() {
    return new THREE.Vector3();
  }
}

• 效果：Webpack打包后的插件代码里，不会包含Three.js的任何代码，而是会用全局变量THREE来引用它。用户使用你的插件时，只需要先加载Three.js（比如通过CDN或者本地引入），再加载你的插件就行。

方案三：用Rollup替代Webpack（可选） #

如果你的插件是纯ES模块，Rollup处理这种场景会更简洁。配合Rollup的插件可以轻松排除Three.js：

1. 安装必要的插件：

npm install @rollup/plugin-typescript @rollup/plugin-node-resolve --save-dev

2. 配置rollup.config.js：

import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/my-plugin.js',
    format: 'umd', // 兼容多种模块系统
    name: 'MyPlugin' // 全局变量名
  },
  plugins: [resolve(), typescript()],
  external: ['three'] // 声明three为外部依赖
};

• 效果：打包后的代码会把Three.js作为依赖项，用户使用时需要确保Three.js已经存在（无论是ES模块导入还是全局变量）。

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