webpack gl-matrix 作为外部

Question

我正在使用gl-matrix作为依赖项编写一个库。我正在使用 webpack 输出 src，并希望从我的代码中排除 gl-matrix 部分，但将其列为依赖项。

但事实证明，我只能将 gl-matrix 打包到库中，或者错误地说 gl-matrix 中的对象(如vec3在我的库中未定义)。有什么想法吗？

webpack.config.js

module.exports = {
//...
output: {
filename: 'minimal-gltf-loader.js',
path: path.resolve(__dirname, 'build'),
library: 'MinimalGLTFLoader',
libraryTarget: 'umd'
},
externals: {
glMatrix: {
commonjs: 'gl-matrix',
commonjs2: 'gl-matrix',
amd: 'gl-matrix'
}
}
}

最小gltf-loader.js(我的库)

import {vec3, vec4, quat, mat4} from 'gl-matrix';
//...
export { MinimalGLTFLoader };

该应用程序

import {vec3, vec4, quat, mat4} from 'gl-matrix';
var mgl = require('../build/minimal-gltf-loader.js');

Answer 1

externals: [
{
'gl-matrix': {
root: 'window',
commonjs: 'gl-matrix',
commonjs2: 'gl-matrix',
amd: 'gl-matrix'
}
}
]

如果你通过脚本标签导入gl-matrix，它将是几个全局变量，如vec3、mat4，但不是gl-matrix.vec3、gl-matrix.mat4。 因此，您可以将它们设置为一个变量，然后将此变量用作 webpack 外部根配置。

然后我发现window对象window指向它本身的 attr，因此在根字段中使用"window"是更好的选择，它不再需要声明一个统一的变量。

Answer 2

externals: {
'gl-matrix': {
commonjs: 'gl-matrix',
commonjs2: 'gl-matrix',
amd: 'gl-matrix'
}
}

外部字典名称应与库的名称匹配