如何使用WebPack或Rollup树摇Three.js？

Question

我有一个只使用库的一部分的Three.js场景.

import {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    BoxGeometry,
    MeshBasicMaterial,
    Mesh} from 'three';

但是我仍然最终得到了整个图书馆(大约500Kb缩小版)的大部分内容(如果不是全部的话).有人有运气吗？我有一个示例GitHub,显示我正在使用的代码.

Answer 1

我目前在一个项目中使用 WebPack2，并转而使用内置的 tree-shaking。让我们逐步完成以下步骤：

• 显然，通过 npm 安装当前的 Three.js：npm install three

• 在 webpack-config 中，我们需要重写import {Something} from 'three';代码中发生的情况。为此，我使用解析器配置的别名设置来使用较新的 Three.js 版本中包含的备用模块构建：

   {
     resolve: {
       extensions: ['.js'],
       modules: [SRC_PATH, 'node_modules'],
       alias: {
         'three': path.join(__dirname, 'node_modules/three/build/three.module.js')
       }
     }
   }
  

• 现在，如果您使用 babel 来转译您的 javascript，您需要确保不包含将 es6-modules 编译为 commonjs 的插件。否则 babel-tree-shaking 根本找不到任何 es6 模块来摇动（如果您已经在使用 es2015-preset，您可以使用babel-preset-es2015-native-modules它）。这篇博文中有更多相关信息。