Webpack＆Bower：多个css＆js文件

我刚刚开始使用Webpack（用于w / React），并且在试图引入bower包时遇到了一些问题。 我已经安装通过凉亭pickadate ，我有以下webpackconfiguration（ 原始 ）。 看看pickadate bower.json文件，它有一个数组，而不是只有一个string，因为它需要拉多个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') require('pickadate/lib/picker') 。 这到达了pickadate包，实际上需要一个真正的文件。 如果上游修复了它们的package.json以获得主条目，则可以从您的configuration中删除此别名，并且您的所有要求都将正常工作。

有关别名选项如何工作的更多信息： 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来安装软件包，并明确地要求（）css文件

Answer 3

我使用pickadate包装器（ng-pickadate）面对同样的问题，希望大多数怪癖将适用：

• 引用js文件，pickadate包json入口点似乎不是好的。
• 为pickadate节点模块path禁用AMD。
• 添加提供（$，Jquery，window.jquery）。

贝娄一步一步的指导（删除angular部分，如果你只是想configurationpickadate）。

按照这个线程中提到的步骤，我设法使其工作，而不必调整node_modules下的代码。 只是一个快速回顾（angular1，webpack 2解决scheme）：

首先安装ng-pickadate

npm install ng-pickadate

它将下载以及jQuery和pickadate依赖关系。

然后我们需要在我们的webpack.config中添加依赖项，这里有一个catch pickad.js包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",
}), diff plugins: [ + new webpack.ProvidePlugin({ + "$": "jquery", + "jQuery": "jquery", + "window.jQuery": "jquery",
}),是时候开始在我们的应用程序中使用它，让我们把它包括在我们正在使用它的angular度模块（我们正在使用angular1.6）：

diff导入*为'angular'的angular度; 从'./login.component'导入{LoginComponent};

导出常量LoginModule = angular.module（'loginModule'，+ ['pickadate']）.component（'login'，LoginComponent）; “`

让我们使用HTML中的指令（input）

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

所有这些步骤只是几个开放的问题反馈的回顾，感谢所有提供正确提示的chaps :-)。 新的部分标有“+”（看起来stackoverflow不支持差异）。