在Webpack项目中导入Threejs库的正确方法

时间:2019-06-07 10:21:10

标签: webpack three.js bundle

在webpacke管理的项目中导入threejs自定义库时遇到一些麻烦。

所以,我的想法是像这样连接库

global.THREE = require("path_to_lib/three.js");

然后在我的代码中使用它。

问题是我无法正确理解如何加载具有这样的“加载前缀代码”的代码

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = global || self, factory(global.THREE = {}));
}(global, function (exports) { 'use strict'; <the actual code I need>}))

问题是,当我使用常规的require 时,这个关键字指向一个empry对象,而我想使其指向窗口对象。

做这样的事对我也不起作用

var THREE = require.bind(this, "path_to_lib/three.js")

因为它会生成警告。

我也尝试使用webpack的bundle-loader插件,它确实可以改变某些东西。它定义了“导出”并运行“加载前缀”的这一部分

typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports)

代替这个

global = global || self, factory(global.THREE = {})

是否有一种方法可以传递要绑定三个的范围?还是做我打算做的更好的方法?

0 个答案:

没有答案