popperjs - Uso de browserify con npm jQuery y complementos que no son npm

npm popperjs

Question

Estoy utilizando browserify para agrupar código de front-end. Ha sido genial hasta ahora, pero he tenido dificultades para mezclar paquetes npm y no npm. Por ejemplo, usando la versión npm de jQuery con versiones no CJS de los complementos de jQuery.

Mi solución actual es usar la clave del browser en package.json para apuntar a la dist de jQuery, y luego usar browserify-shim para agregarla como una dependencia de los complementos.

¿Hay una forma más limpia de hacerlo que la que tengo actualmente?

Edit: actualmente estoy tratando de usar npm y package.json para administrar todas mis dependencias, por lo que no quiero usar Bower en este proyecto. Llámame loco : )

Paquete.json

{
  "dependencies": {
    "jquery": "~2.1.0",
    "browserify": "latest",
    "browserify-shim": "^3.5.0",
    "jquery-waypoints": "[email protected]:imakewebthings/jquery-waypoints.git",
    "jquery-validation": "git://github.com/jzaefferer/jquery-validation"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "jquery-waypoints": "./node_modules/jquery-waypoints/waypoints.js",
    "jquery-validate": "./node_modules/jquery-validation/build/release.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-waypoints": {
      "depends": [
        "jquery"
      ]
    },
    "jquery-validate": {
      "depends": [
        "jquery"
      ]
    }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

Answer 1

Haría lo siguiente:

1. Utilice debowerify para incluir las bibliotecas disponibles en bower, en su caso serán, jquery-waypoints, jquery-validation

2. Use el paquete jquery que viene en el paquete npm, que está disponible aquí https://github.com/jquery/jquery

Como tal, también eliminaría browserify-shim por el momento.

Answer 2

La directiva del browser es solo un alias para especificar lo que desea cuando escribe jquery . El valor predeterminado para jquery es la ruta en node_modules , por lo que su línea:

"jquery": "./node_modules/jquery/dist/jquery.js",

... es redundante y puedes eliminarlo, porque cuando escribes "depends": ["jquery"] en tu configuración de configuración del navegador, jquery ya apunta a ./node_modules/jquery/dist/jquery.js sin esa línea en tu clave del browser . De hecho, probablemente podría eliminar la directiva del browser completo, tendría que verificar la configuración en los archivos package.json esos complementos de jQuery, pero lo más probable es que ya tengan un alias tal como los tiene, sin la anulación del browser .

De lo contrario, no creo que haya una forma más limpia de implementar esto. Como usted dijo, necesita usar Browserify Shim para simular esos complementos jQuery que no son CJS y lo está haciendo de la manera correcta.

Answer 3

Me estoy perdiendo la definición correcta de las dependencias (por ejemplo, establezca "$" en su declaración jquery):

"plugin": {
  "exports": "plugin",
  "depends": [
    "jquery:$"
  ]
},...