Webpack & Bower: несколько файлов css и js

Question

Я только начинаю работу с Webpack (для использования w/React), и у меня возникают проблемы при попытке подключить пакеты bower. Я установил pickadate через bower, и у меня есть следующая конфигурация 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 

Я попытался установить как JQuery и pickadate через НПМ, но я все еще получаю ошибка Cannot find module 'pickadate'

Answer 1

Модуль pickadate на npm имеет брата ken package.json файл: он не указывает основную запись, поэтому webpack не имеет понятия, как разрешить require('pickadate'). Вероятно, вы должны указать для него проблему, чтобы исправить это, но в то же время вы можете исправить ее в своем webpack.config.js.

Итак, вы хотите установить как 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

webpack.ResolverPlugin.DirectoryDescriptionFilePlugin не обрабатывает bower.json файл описание, когда «основное» поле представляет собой массив, например Bootstrap:

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

В этом случае вы должны установить пакет, используя npm, и потребовать() css-файлы явно

Answer 3

Я столкнулся с той же проблемой, используя обертку pickadate (ng-pickadate), надеюсь, большая часть причуд w плохое применение:

• Ссылка на js-файлы, pickadate package json entry point, похоже, не в порядке.
• Отключение AMD для пути модулей узла pickadate.
• Добавить enablepluing ($, Jquery, window.jquery).

См. Пошаговое руководство (удалите угловую часть, если вы просто хотите настроить pickadate).

Следуя инструкциям, приведенным в этой статье, мне удается заставить его работать без необходимости подстраивать код под узлами node_modules.Только быстрое повторение (угловой 1, 2 WebPack раствор):

Сначала установите нг-pickadate

npm install ng-pickadate

Это загрузит, а Jquery и pickadate зависимостей.

Затем нам нужно добавить depencies в нашем webpack.config, здесь есть подвох pickadate.js пакет JSON основной, кажется, не указывая на нужную точку входа, мы должны вручную указать, какие файлы мы хотите включить:

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",
}), Пришло время, чтобы начать использовать это в нашем приложении, давайте включим его в угловой модуль, где мы его используем (мы используем угловое значение 1.6):

`` `diff import * as angular from 'angleular'; импорт {LoginComponent} из './login.component';

экспорта Const LoginModule = angular.module ('LoginModule', + [ 'pickadate']) .component ('Войти', LoginComponent) ; `` `

И давайте использовать директиву в HTML (вход)

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

Все эти шаги являются лишь повторение обратной связи получил от нескольких вопросов, которые были открыты, спасибо всем парням которые обеспечивали правильные советы :-). Новые элементы отмечены знаком «+» (кажется, что stackoverflow не поддерживает diff).