Webpack&鲍尔：多个css& js文件 [英] Webpack & Bower: Multiple css & js files

问题描述

我刚刚开始使用Webpack（与React一起使用），并且在尝试拉入bower包时遇到了一些问题。我已经通过bower安装了 pickadate ，我有以下webpack配置（原创）。看看pickadate bower.json文件，它有一个数组，而不只是 main 的字符串，因为它需要输入多个js和css文件。

I'm just getting started with Webpack (for use w/ React), and I'm running into an issues when trying to pull in bower packages. I have installed pickadate through bower and I have the following webpack config (original). Looking at the pickadate bower.json file, it has an array instead of just a string for main as it needs to pull in multiple js and css files.

// ./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模块出现以下错误：

I get the following errors for jquery and pickadate modules:

@ ./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'

I attempted to install both jquery and pickadate through npm, but I still get the error Cannot find module 'pickadate'

推荐答案

上面的pickadate模块npm有一个损坏的 package.json 文件：它没有指定主条目，所以webpack不知道如何解决 require（'pickadate' ）。您可能应该向上游提出问题以解决此问题，但同时您可以在 webpack.config.js 中修复它。

The pickadate module on npm has a broken package.json file: it doesn't specify a main entry, so webpack has no idea how to resolve require('pickadate'). You should probably file an issue upstream for them to fix this, but in the meanwhile you can fix it in your webpack.config.js.

所以，你想通过npm安装pickadate和jquery，然后将以下内容添加到 webpack.config.js ：

So, you want to install both pickadate and jquery through npm, and then add the following to webpack.config.js:

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

这基本上对待所有的实例需要（'pickadate'）进入 require（'pickadate / lib / picker'）。这进入了pickadate包，实际上需要一个真实的文件。如果上游修复了他们的 package.json 以获得主条目，您可以从配置中删除此别名，并且您的所有要求都将正常运行。

This basically treats all instances of require('pickadate') into require('pickadate/lib/picker'). This reaches into the pickadate package and actually requires a real file. If upstream fixes their package.json to have a main entry, you can delete this alias from your config and all your requires will work properly.

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

More information about how the alias option works: http://webpack.github.io/docs/configuration.html#resolve-alias

这篇关于Webpack&鲍尔：多个css& js文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！