解决 webpack 中的外部子模块依赖

Question

我正在尝试将模块化第三方库 (PhysicsJS) 包含到我的 webpack 项目中。这个库是 AMD 和 CommonJS 友好的，并且有我想要访问的格式良好的子模块。然而，它主要是为 RequireJS 构建的，通过它在 require.config() 中的 packages 定义规范，所以入口点不是标准的 index.js。相反，入口点是 physicsjs.js。

换句话说，我似乎无法弄清楚如何配置 webpack 来解析库的主文件及其子模块。看起来如果库的入口点不是 index.js 并且它有子模块，那你就不走运了，我简直不敢相信这是正确的，所以我一定是遗漏了一些东西。

那么，下面的语句如何解决呢？

require('physicsjs'); // entry point
require('physicsjs/bodies/rectangle');  // submodule

我试过此配置的变体：

resolve: {
    modulesDirectories: [
        'js/bower_components'
    ],
    alias: {
        'physicsjs': 'PhysicsJS/dist/',
        // doesn't find physicsjs.js

        'physicsjs': 'PhysicsJS/dist/physicsjs.js'
        // doesn't find the submodules
    }
},

目录结构如下所示：

+ js
  - main.js
  + bower_modules
    + PhysicsJS
      + dist
        - physicsjs.js // module entry point
        + bodies
          - rectangle.js // desired submodule
  + lib
    - MyModule.js

请注意，PhysicsJS 确实有整个库的缩小版本，如果没有其他选择，我会使用它，但我宁愿只加载我实际使用的内容。

此外，子模块本身使用 require('physicsjs')，因此调用 require('physicsjs/physicsjs') 不是解决方案。

Answer 1

解决方案是声明别名两次，第一次是完全匹配（使用尾随 $），然后再次是正常匹配（没有尾随 $）。所以我的配置现在看起来更像这样：

resolve: {
    modulesDirectories: [
        'js/bower_components'
    ],
    alias: {
        'physicsjs$': 'PhysicsJS/dist/physicsjs.js', // Exact match
        'physicsjs': 'PhysicsJS/dist' // and again with a fuzzy match
    },
},

解决 webpack 中的外部子模块依赖

Resolving external submodule dependences in webpack

javascript

dependencies

physicsjs

webpack