webpack 无法解析来自 Bower 的 c3.js：怎么了？

Question

我正在尝试 require("c3"); c3.js 字符库与来自 bower_components 的 webpack，但 webpack 拒绝这样做。我成功地从 bower 导出了许多其他库，但无法想象，这个库有什么问题：

require("expose?$!expose?jQuery!jquery");
require("metisMenu/dist/metisMenu");
require("iCheck/icheck");
require("expose?_!lodash"); // was underscore
var d3 = require("d3");

这些库加载正常，但这个崩溃了：

var c3 = require("c3");

Module not found: Error: Cannot resolve module 'c3' in /home/bob/Documents/...

这是 webpack.config.js 的相关内容：

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ), // bower; see: https://github.com/webpack/docs/wiki/usage-with-bower
    new ExtractTextPlugin("app.[hash:7].css"),
    new HtmlWebpackPlugin({
        inject: "body",
        template: "app/index.html",
        filename: "index.html"
    }),

因此，从 bower 加载是按照建议设置的，在其他情况下也能正常工作。

我注意到 c3 在 bower.json 主要部分中有多个文件：

"main": [
  //    "c3.css",
  "c3.js"
],

所以我注释掉了 c3.css 以进行测试。还是不行。

这个错误可能是什么原因？

Answer 1

我建议您使用 BowerWebpackPlugin。它应该自动工作。如果你因为某些原因不能使用 BowerWebpackPlugin，你可以试试这个：

// webpack.config.js

  resolve: {
      modulesDirectories: ["bower_components"]
  },
  plugins: [
    "..."
  ]

和

require('c3/c3.css');
var c3 = require('c3/c3.js');

Answer 2

啊哈，我成功地要求 c3 作为一个文件，而不是作为一个 bower 包。刚才说了require('c3/c3');。

我真的不知道，这种行为的原因是什么 - 但不是 c3 的 bower.json.

中的多个 main 目标

webpack 无法解析来自 Bower 的 c3.js：怎么了？

webpack cannot resolve c3.js from Bower: what's wrong?

bower

webpack