I'm writing a library using gl-matrix as a dependency. I'm using webpack to output the src and want to exclude gl-matrix part from my code but list it as a dependency.
But turns out I can only packed the gl-matrix into the lib, or have error saying objects from gl-matrix like vec3
is undefined in my lib. Any ideas?
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'
}
}
}
minimal-gltf-loader.js (my lib)
import {vec3, vec4, quat, mat4} from 'gl-matrix';
//...
export { MinimalGLTFLoader };
the app
import {vec3, vec4, quat, mat4} from 'gl-matrix';
var mgl = require('../build/minimal-gltf-loader.js');
externals: [
{
'gl-matrix': {
root: 'window',
commonjs: 'gl-matrix',
commonjs2: 'gl-matrix',
amd: 'gl-matrix'
}
}
]
If you import gl-matrix via script tag, it will be several global variables like vec3
,mat4
, but not gl-matrix.vec3
,gl-matrix.mat4
.
So you can set them to one variable and then use this variable as webpack external root config.
Then I found that window
object has window
attr that points to it self, so use 'window' in root field is a better choice and it's doesn't need to declare a united variable anymore.