javascript - Webpack & Bower : Multiple css & js files

Question

我刚刚开始使用 Webpack(与 React 一起使用)，在尝试拉入 Bower 包时遇到了问题。我已经安装了pickadate通过 Bower，我有以下 webpack 配置( original )。查看 pickadate Bower.json 文件，它有一个数组，而不仅仅是 main 的字符串，因为它需要拉入多个 js 和 css 文件。

// ./webpack/dev.config.js
// ...
resolve: {
  modulesDirectories: [
    'src',
    'node_modules',
    'bower_components'
  ],
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    )
  ],
  extensions: ['', '.json', '.js']
},

我的组件:

import React, {Component, PropTypes} from 'react';

import $ from 'jquery';
import pickadate from 'pickadate';

class DateInput extends Component {
  // ...
}

我收到 jquery 和 pickadate 模块的以下错误:

@ ./src/components/forms/DateInput.js 17:14-31
[0] ./src/components/forms/DateInput.js
[0] Module not found: Error: Cannot resolve module 'jquery' in /Users/chris7519/Desktop/react-redux-universal-hot-example/src/components/forms
[0] resolve module jquery in /Users/chris7519/Desktop/react-redux-universal-hot-example/src/components/forms
[0]   looking for modules in /Users/chris7519/Desktop/react-redux-universal-hot-example/src
[0]     /Users/chris7519/Desktop/react-redux-universal-hot-example/src/jquery doesn't exist (module as directory)
[0]     resolve 'file' jquery in /Users/chris7519/Desktop/react-redux-universal-hot-example/src
[0]       resolve file
[0]         /Users/chris7519/Desktop/react-redux-universal-hot-example/src/jquery doesn't exist
[0]         /Users/chris7519/Desktop/react-redux-universal-hot-example/src/jquery.json doesn't exist
[0]         /Users/chris7519/Desktop/react-redux-universal-hot-example/src/jquery.js doesn't exist

// ...

Module not found: Error: Cannot resolve module 'pickadate' in /Users/chris7519/Desktop/react-redux-universal-hot-example/src/components/forms
[0] resolve module pickadate in /Users/chris7519/Desktop/react-redux-universal-hot-example/src/components/forms
[0]   looking for modules in /Users/chris7519/Desktop/react-redux-universal-hot-example/src
[0]     /Users/chris7519/Desktop/react-redux-universal-hot-example/src/pickadate doesn't exist (module as directory)
[0]     resolve 'file' pickadate in /Users/chris7519/Desktop/react-redux-universal-hot-example/src
[0]       resolve file
[0]         /Users/chris7519/Desktop/react-redux-universal-hot-example/src/pickadate doesn't exist
[0]         /Users/chris7519/Desktop/react-redux-universal-hot-example/src/pickadate.json doesn't exist
[0]         /Users/chris7519/Desktop/react-redux-universal-hot-example/src/pickadate.js doesn't exist

我尝试通过 npm 安装 jquery 和 pickadate，但仍然收到错误找不到模块“pickadate”

Answer 1

npm 上的 pickadate 模块有一个损坏的 package.json 文件:它没有指定主条目，因此 webpack 不知道如何解析 require('pickadate')。您可能应该向上游提交一个问题以供他们解决此问题，但同时您可以在 webpack.config.js 中修复它。

因此，您想通过 npm 安装 pickadate 和 jquery，然后将以下内容添加到 webpack.config.js 中:

{
    resolve: {
        alias: {
            'pickadate' : 'pickadate/lib/picker',
        },
    },
 }

这基本上将 require('pickadate') 的所有实例都视为 require('pickadate/lib/picker')。这涉及到 pickadate 包并且实际上需要一个真实的文件。如果上游将其 package.json 修复为具有主条目，您可以从配置中删除此别名，并且您的所有需求都将正常工作。

有关别名选项如何工作的更多信息:http://webpack.github.io/docs/configuration.html#resolve-alias