Webpack & Bower：多个 css & js 文件

Question

我刚刚开始使用 Webpack（与 React 一起使用），在尝试引入 bower 包时遇到了问题。我已经通过 bower 安装了pickadate，并且我有以下 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，但仍然收到错误 Cannot find module '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

Answer 2

当'main'字段为数组时，webpack.ResolverPlugin.DirectoryDescriptionFilePlugin 不处理 bower.json 描述文件，例如Bootstrap：

"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
]

在这种情况下，你应该使用 npm 安装包，并明确 require() css 文件

Answer 3

我在使用 pickadate 包装器 (ng-pickadate) 时遇到了同样的问题，希望大多数怪癖都适用：

• 引用js文件，pickadate包json入口点好像不行。
• 为 pickadate 节点模块路径禁用 AMD。
• 添加提供插件（$、Jquery、window.jquery）。

以下分步指南（如果您只想配置pickadate，请删除角部分）。

按照此线程中提到的步骤，我设法使其工作，而无需调整 node_modules 下的代码。简单回顾一下（angular 1，webpack 2 解决方案）：

首先安装 ng-pickadate

npm install ng-pickadate

它还将下载 jquery 和 pickadate 依赖项。

然后我们需要在我们的webpack.config中添加依赖，这里有一个catch pickadate.js package json main 好像没有指向正确的入口点，我们要手动指明哪个我们要包含的文件：

diff module.exports = { context: path.join(basePath, 'src'), resolve: { extensions: ['.js', '.ts'] }, entry: { app: './app/app.ts', vendor: [ + 'jquery', + 'angular',
+ 'pickadate/lib/picker', + 'pickadate/lib/picker.date',
+ 'ng-pickadate', ],

现在有趣的部分来了，pickadate 将尝试加载 AMD 模块，在我的情况下，我们需要 commonjs，我们不想更改库上的代码，而是禁用它 使用规则（加载器），仅适用于pickadate文件夹：

diff module: { rules: [ + { + test: /pickadate/, + parser: { amd: false } + },
{ test: /\.ts$/,

现在让我们回顾一下我们的提供插件，并确保我们拥有所有这些全局引用 jquery 的方式（window.jquery 非常重要！）

diff plugins: [ + new webpack.ProvidePlugin({ + "$": "jquery", + "jQuery": "jquery", + "window.jQuery": "jquery",
}), 是时候在我们的应用程序中开始使用它了，让我们将它包含在 angular 模块中 我们正在使用它（我们正在使用 angular 1.6）：

```差异 从“角度”导入*作为角度； 从 './login.component' 导入 { LoginComponent };

export const LoginModule = angular.module('loginModule', + ['pickadate']) .component('登录', 登录组件) ; ```

让我们在 HTML（输入）中使用指令

diff <div class="form-group"> <label for="txtEmail">Birthdate</label> <input type="text" + pick-a-date="vm.curDate"/> </div>

所有这些步骤只是对从几个开放问题中获得的反馈的回顾，感谢所有提供正确提示的小伙子 :-)。新的部分标有“+”（似乎stackoverflow不支持diff）。