如何通过 webpack 加载 bugsense.js？答案

【问题标题】：How to load bugsense.js via webpack?如何通过 webpack 加载 bugsense.js？
【发布时间】：2016-04-22 23:15:23
【问题描述】：

到目前为止，我的 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 配置简单地修复它吗？

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

问题是 bugsense 没有正确设置 package.json 的 main 字段。 Webpack 会据此确定从何处获取库。

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

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

您可能需要尝试该路径。

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

【讨论】：