如何通过 webpack 加载 bugsense.js？

Question

到目前为止，我的 webpack 开发服务器与我现有的依赖集没有问题。

现在我想在我的项目中使用 bugsense。 bugsense 库不在 npm 存储库中。

这就是我将它包含在我的 package.json

中的方式

   "dependencies": {
     "bootstrap": "^3.3.6",
     "bugsense": "bugsense/bugsense.js",   
     ...

软件包已按预期从 github 下载。

然而，当我尝试将其导入 es6 js 脚本时，就像这样

import bugsense from 'bugsense';

我收到这些错误消息

Module not found: Error: Cannot resolve module 'bugsense' in /Users/antkong/dev/projects/web/app/scripts/actions
resolve module bugsense in /Users/antkong/dev/projects/web/app/scripts/actions
  looking for modules in /Users/antkong/dev/projects/webview/node_modules
    /Users/antkong/dev/projects/webview/node_modules/bugsense doesn't exist (module as directory)
    resolve 'file' bugsense in /Users/antkong/dev/projects/webview/node_modules
      resolve file
        /Users/antkong/dev/projects/webview/node_modules/bugsense doesn't exist
        /Users/antkong/dev/projects/webview/node_modules/bugsense.webpack.js doesn't exist
        /Users/antkong/dev/projects/webview/node_modules/bugsense.web.js doesn't exist
        /Users/antkong/dev/projects/webview/node_modules/bugsense.js doesn't exist
        /Users/antkong/dev/projects/webview/node_modules/bugsense.json doesn't exist
  looking for modules in /Users/antkong/dev/projects/web/node_modules
    resolve 'file' bugsense in /Users/antkong/dev/projects/web/node_modules
      resolve file
        /Users/antkong/dev/projects/web/node_modules/bugsense is not a file
        /Users/antkong/dev/projects/web/node_modules/bugsense.webpack.js doesn't exist
        /Users/antkong/dev/projects/web/node_modules/bugsense.web.js doesn't exist
        /Users/antkong/dev/projects/web/node_modules/bugsense.js doesn't exist
        /Users/antkong/dev/projects/web/node_modules/bugsense.json doesn't exist
    resolve 'file' or 'directory' /Users/antkong/dev/projects/web/node_modules/bugsense
      resolve file
        /Users/antkong/dev/projects/web/node_modules/bugsense is not a file
        /Users/antkong/dev/projects/web/node_modules/bugsense.webpack.js doesn't exist
        /Users/antkong/dev/projects/web/node_modules/bugsense.web.js doesn't exist
        /Users/antkong/dev/projects/web/node_modules/bugsense.js doesn't exist
        /Users/antkong/dev/projects/web/node_modules/bugsense.json doesn't exist
      resolve directory
        directory default file index
          resolve file index in /Users/antkong/dev/projects/web/node_modules/bugsense
            /Users/antkong/dev/projects/web/node_modules/bugsense/index doesn't exist
            /Users/antkong/dev/projects/web/node_modules/bugsense/index.webpack.js doesn't exist
            /Users/antkong/dev/projects/web/node_modules/bugsense/index.web.js doesn't exist
            /Users/antkong/dev/projects/web/node_modules/bugsense/index.js doesn't exist
            /Users/antkong/dev/projects/web/node_modules/bugsense/index.json doesn't exist
        use ./lib/node/index.js from package.json
          resolve 'file' or 'directory' ./lib/node/index.js in /Users/antkong/dev/projects/web/node_modules/bugsense
            resolve file
              /Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.webpack.js doesn't exist
              /Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js doesn't exist
              /Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.web.js doesn't exist
              /Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.js doesn't exist
              /Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.json doesn't exist
            resolve directory
              /Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js doesn't exist (directory default file)
              /Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js/package.json doesn't exist (directory description file)
[/Users/antkong/dev/projects/web/node_modules/bugsense.webpack.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense.webpack.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense.web.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense.web.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense.json]
[/Users/antkong/dev/projects/web/node_modules/bugsense.json]
[/Users/antkong/dev/projects/webview/node_modules/bugsense]
[/Users/antkong/dev/projects/webview/node_modules/bugsense]
[/Users/antkong/dev/projects/webview/node_modules/bugsense.webpack.js]
[/Users/antkong/dev/projects/webview/node_modules/bugsense.web.js]
[/Users/antkong/dev/projects/webview/node_modules/bugsense.js]
[/Users/antkong/dev/projects/webview/node_modules/bugsense.json]
[/Users/antkong/dev/projects/web/node_modules/bugsense/index]
[/Users/antkong/dev/projects/web/node_modules/bugsense/index.webpack.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense/index.web.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense/index.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense/index.json]
[/Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.webpack.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.web.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.js]
[/Users/antkong/dev/projects/web/node_modules/bugsense/lib/node/index.js.json]
 @ ./app/scripts/actions/someActions.js 21:16-35

由于缺少文件，Webpack 无法加载模块。

我该如何解决？我可以通过一些 webpack 配置简单地修复它吗？

Answer 1

问题是 bugsense 没有正确设置 package.json 的 main 字段。 Webpack 基于此确定从哪里获取库。

要解决这个问题，您可以这样定义 resolve.alias：

{
  resolve: {
    alias: {
      bugsense: path.join(__dirname, 'bugsense/bugsense.js/lib/amd/bugsense.js')
    }
  }
}

您可能需要尝试该路径。

您还可以考虑指向缩小版本，然后设置 module.noParse 以便 webpack 知道避免解析文件。这可能会带来一些额外的性能。

如何通过 webpack 加载 bugsense.js？

How to load bugsense.js via webpack?

webpack

webpack-dev-server