如何通过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的package.json字段。Webpack在此基础上找出了去哪里取图书馆的方法。

为了解决这个问题，您可以定义如下的resolve.alias：

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

你可能需要尝试一下这条路。

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