webpack gl-matrix 作为外部答案

【问题标题】：webpack gl-matrix as an externalwebpack gl-matrix 作为外部
【发布时间】：2017-09-22 00:53:38
【问题描述】：

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

但事实证明我只能将 gl-matrix 打包到 lib 中，或者说来自 gl-matrix 的对象（如 vec3）在我的 lib 中未定义。有什么想法吗？

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（我的库）

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');

【问题讨论】：

你解决过这个问题吗？

标签： webpack gl-matrix

【解决方案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'是一个更好的选择，它不再需要声明一个联合变量。

【讨论】：

【解决方案2】：

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

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

【讨论】：