Webpack & Bower: múltiples archivos css y js

Estoy empezando con Webpack (para usar con w / React), y tengo problemas al intentar extraer paquetes de bower. He instalado pickadate a través de bower y tengo la siguiente configuración de webpack ( original ). Al observar el archivo bower.json de pickadate, tiene una matriz en lugar de solo una cadena para main ya que necesita ingresar múltiples archivos js y 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'] }, 

Mi componente:

 import React, {Component, PropTypes} from 'react'; import $ from 'jquery'; import pickadate from 'pickadate'; class DateInput extends Component { // ... } 

Obtengo los siguientes errores para los módulos jquery y 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 

Intenté instalar jquery y pickadate a través de npm, pero sigo recibiendo el error Cannot find module 'pickadate'

El módulo pickadate en npm tiene un archivo package.json dañado: no especifica una entrada principal, por lo que el webpack no tiene idea de cómo resolver el require('pickadate') . Probablemente debería archivar un problema en sentido ascendente para que solucionen esto, pero mientras tanto puede solucionarlo en su webpack.config.js .

Entonces, desea instalar pickadate y jquery a través de npm, y luego agregar lo siguiente a webpack.config.js :

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

Básicamente, esto trata todas las instancias de require('pickadate') en require('pickadate/lib/picker') . Esto llega al paquete pickadate y en realidad requiere un archivo real. Si upstream corrige su package.json para tener una entrada principal, puede eliminar este alias de su configuración y todos sus requisitos funcionarán correctamente.

Más información sobre cómo funciona la opción de alias: http://webpack.github.io/docs/configuration.html#resolve-alias

webpack.ResolverPlugin.DirectoryDescriptionFilePlugin no maneja el archivo de descripción bower.json cuando el campo ‘principal’ es una matriz, por ejemplo Bootstrap :

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

En ese caso, debe instalar el paquete usando npm y requerir () archivos css explícitamente

Me enfrenté al mismo problema usando un envoltorio pickadate (ng-pickadate), espero que la mayoría de las peculiaridades se apliquen:

  • Haciendo referencia a los archivos js, el punto de entrada pickson del paquete json parece no estar bien.
  • Desactivación de AMD para la ruta de los módulos de nodo pickadate.
  • Añadir proporcionplue ($, Jquery, window.jquery).

Abajo de la guía paso a paso (quite la parte angular, si solo desea configurar pickadate).

Siguiendo los pasos mencionados en este hilo, logro hacer que funcione sin tener que modificar el código en node_modules. Solo un resumen rápido (angular 1, solución webpack 2):

Primero instale ng-pickadate

npm install ng-pickadate

Se descargará también las dependencias jquery y pickadate.

Luego debemos agregar las dependencias en nuestro webpack.config, aquí hay un retén pickadate.js que parece que el paquete json main no apunta al punto de entrada correcto, tenemos que indicar manualmente qué archivos queremos incluir:

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', ],

Ahora viene la parte divertida, pickadate intentará cargar módulos AMD, en mi caso necesitamos commonjs, no queremos cambiar el código en la biblioteca, sino que deshabilitarlo usando una regla (cargador), solo para la carpeta pickadate:

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

Ahora revisemos nuestro complemento de provisión y aseguremos que tengamos todas estas formas de referenciación global de jQuery (¡window.jquery es muy importante!)

diff plugins: [ + new webpack.ProvidePlugin({ + "$": "jquery", + "jQuery": "jquery", + "window.jQuery": "jquery",
}),
diff plugins: [ + new webpack.ProvidePlugin({ + "$": "jquery", + "jQuery": "jquery", + "window.jQuery": "jquery",
}),
Es hora de comenzar a usar esto en nuestra aplicación, incluyámoslo en el módulo angular donde lo estamos usando (estamos usando angular 1.6):

“ `diff import * como angular desde ‘angular’; importe {LoginComponent} desde ‘./login.component’;

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

Y vamos a usar la directiva en el HTML (entrada)

diff

Todos estos pasos son solo un resumen de los comentarios recibidos de varios temas que estaban abiertos, gracias a todos los capítulos que proporcionaron los consejos correctos :-). Las partes nuevas están marcadas con “+” (parece que stackoverflow no admite diff).

Intereting Posts