Javascript 网页及；鲍尔：多重css&；js文件

我刚刚开始使用Webpack（用于w/React），在尝试使用bower软件包时遇到了一些问题。我已通过bower安装，我有以下网页包配置（）。查看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'

npm上的pickadate模块有一个损坏的

包。json

文件：它没有指定主条目，因此webpack不知道如何解决

需要（'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

以拥有一个主条目，那么您可以从配置中删除此别名，并且所有需要的都将正常工作

---

有关别名选项工作原理的详细信息：

当“main”字段是数组时，

webpack.ResolverPlugin.directoryScriptionFilePlugin

不处理bower.json描述文件，例如：

---

在这种情况下，您应该使用npm安装该软件包，并明确要求（）css文件

我使用pickadate包装器（ng pickadate）遇到了同样的问题，希望大多数怪癖都适用：

• 引用js文件时，pickadate包json入口点似乎不正常
• 为pickadate节点模块路径禁用AMD
• 添加provideFluing（$，Jquery，window.Jquery）

按照分步指南（如果您只想配置pickadate，请拆下角度部分）

按照本线程中提到的步骤，我成功地使其工作，而不必调整node_模块下的代码。简单回顾一下（angular 1，webpack 2解决方案）：

首先安装ng pickadate

npm安装ng pickadate

它还将下载jquery和pickadate依赖项

然后我们需要在webpack.config中添加依赖项，这里有一个catch pickadate.js包json main似乎没有指向正确的入口点，我们必须手动指示要包含哪些文件：

diff
module.exports={
上下文：path.join（basePath，'src'），
决心：{
扩展名：['.js'，'.ts']
},
条目：{
app:'./app/app.ts'，
供应商：[
+“jquery”，
+“棱角形的”，

+“pickadate/lib/picker”，
+“pickadate/lib/picker.date”，

+“ng pickadate”，
],

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

diff
模块：{
规则：[
+      {
+测试：/pickadate/，
+分析器：{amd:false}
+}，

{
测试：/\.ts$/,，

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

diff
插件：[
+新的webpack.ProvidePlugin({
+“$”：“jquery”，
+“jQuery”：“jQuery”，
+“window.jQuery”：“jQuery”，

}),

是时候开始在我们的应用程序中使用它了，让我们把它包括在角度模块中，其中 我们正在使用它（我们正在使用angular 1.6）：

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

export const LoginModule=angular.module（'LoginModule'， +['pickadate']） .component（'login'，LoginComponent） ; ```

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

diff
生日

---

所有这些步骤都只是对几个尚未解决的问题的反馈的重述，感谢所有提供正确提示的章节：-）。新的部件标有“+”（似乎stackoverflow不支持diff）.

我尝试了一下，但仍然收到一个错误，说明它找不到模块“pickadate”，如果您需要pickadate/libs/picker，它是否工作（即，它是不工作的别名？）

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