Webpack 和 Bower：多个 css 和 js 文件

IT技术 javascript node.js reactjs bower webpack
2021-05-25 03:42:27

我刚刚开始使用 Webpack（与 React 一起使用），并且在尝试引入 Bower 包时遇到了问题。我已经通过 bower安装了pickadate并且我有以下 webpack 配置（原始）。查看 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 module，我收到以下错误：

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

3个回答

npm 上的 pickadate module有一个损坏的package.json文件：它没有指定主条目，所以 webpack 不知道如何解析require('pickadate'). 您可能应该向上游提交问题以解决此问题，但同时您可以在webpack.config.js.

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

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

这基本上处理require('pickadate')into 的所有实例require('pickadate/lib/picker')。这进入了pickadate包，实际上需要一个真实的文件。如果上游修复了它们package.json的主要条目，您可以从配置中删除此别名，您的所有需求都将正常工作。

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

在webpack.ResolverPlugin.DirectoryDescriptionFilePlugin当“主”字段是一个阵列，例如不处理bower.json描述文件引导：

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

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

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

  • 引用js文件，pickadate包json入口点好像不行。
  • 为pickadate 节点module路径禁用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 module，在我的情况下，我们需要 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 module中（我们使用的是 angular 1.6）：

```diff import * as angular from 'angular'; 从 './login.component' 导入 { LoginComponent };

export const LoginModule = angular.module('loginModule', + ['pickadate']) .component('login', LoginComponent) ; ``

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

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

所有这些步骤只是从几个未解决的问题中获得的反馈的总结，感谢所有提供正确提示的人:-)。新的部分用“+”标记（似乎stackoverflow不支持diff）。

其它你可能感兴趣的问题
上一篇Mobx Inject、Observer 和 HoC 一起 下一篇reactjs - 未捕获的类型错误：无法读取未定义的属性“地图”