javascript - tooltips - tooltip bootstrap css

''jquery no está definido'' al usar webpack para cargar bootstrap

Question

Estoy empezando a aprender a usar Webpack (anteriormente, solo uso la forma manual de incluir scripts individuales por separado). Y usé bootstrap-loader para cargar bootstrap. Aquí está mi webpack.config.js

var path = require("path")
var webpack = require(''webpack'')
var BundleTracker = require(''webpack-bundle-tracker'')

module.exports = {
    context: __dirname,

    entry: ''./assets/js/index'', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs

    output: {
        path: path.resolve(''./assets/bundles/''),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: ''./webpack-stats.json''})
    ],

    module: {
        loaders: [
            { test: //.jsx?$/, exclude: /node_modules/, loader: ''babel-loader''}, // to transform JSX into JS
            { test: //.css$/, loader: ''style-loader!css-loader''}, // to transform css
            // images
            { test: //.png$/, loader: ''url-loader?limit=100000''},
            { test: //.jpg$/, loader: ''file-loader''},
            // bootstrap image files
            { test: //.(woff|woff2)(/?v=/d+/./d+/./d+)?$/, loader: ''url?limit=10000&mimetype=application/font-woff''},
            { test: //.ttf(/?v=/d+/./d+/./d+)?$/, loader: ''url?limit=10000&mimetype=application/octet-stream''},
            { test: //.eot(/?v=/d+/./d+/./d+)?$/, loader: ''file''},
            { test: //.svg(/?v=/d+/./d+/./d+)?$/, loader: ''url?limit=10000&mimetype=image/svg+xml''}
        ],
    },

    resolve: {
        modulesDirectories: [''node_modules'', ''bower_components''],
        extensions: ['''', ''.js'', ''.jsx''],
        jquery: ''./vendor/jquery/jquery.js'',
    },
}

Y aquí está mi entrada.

global.jQuery = global.$ = require(''jquery'');
require(''bootstrap-loader'');

Esto parece funcionar. Sin embargo, usé esto antes y no funcionó:

window.jQuery = window.$ = require(''jquery'');

Encontré la línea anterior sugerida por tanta gente. Pero simplemente obtengo errores al cargar la página. Solo algunos ejemplos: alguna pregunta de SO , problema de webpack , otra pregunta de SO .

Más tarde encontré esta pregunta , y esta pregunta . Así que la página realmente funciona con la funcionalidad bootstrap js que también funciona.

Agregaré mi package.json también en caso de que sea relevante:

{
  "author": "franklingu",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "bootstrap-loader": "^1.2.0-beta.1",
    "bootstrap-sass": "^3.3.7",
    "extract-text-webpack-plugin": "^1.0.1",
    "jquery": "^3.1.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "webpack": "^1.13.1",
    "webpack-bundle-tracker": "0.0.93"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  }
}

Soy nuevo en el webpack pero no soy nuevo en JS. Me pregunto por qué window.$ No está funcionando.

Y me pregunto, para el paquete web, por qué algunas personas sugirieron esto en los complementos:

        new webpack.ProvidePlugin({
            ''window.jQuery'': ''jquery'',
            ''window.$'': ''jquery'',
        })

Algunas personas están sugiriendo esto (tampoco me funcionó):

 resolve: {
    alias: {
        jquery: "jquery/src/jquery"
    }
}

Jugué con el nodo por un tiempo en ese entonces y recordé que el nodo utiliza la solicitud js para cargar (no tengo muy en claro las diferencias entre lo común y lo que se requiere contra lo que es lo mismo que lo que es amd). Pero ¿por qué algunas personas mencionan js comunes?

Estuve desarrollando backend durante algún tiempo y recién comencé con la interfaz, por lo que surgen muchas preguntas. Sería suficiente si me proporcionara algún enlace a alguna guía de lectura que pueda aclarar mis dudas / construir mi entendimiento básico de estas.

Answer 1

Añade esto como complemento

  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })

y deberías poder tener jquery en todo tu proyecto.

Si el problema persiste después de agregar el complemento, intente reiniciar su servidor nodejs . Recuerde instalar jquery usando npm install --save jquery .

Answer 2

Así que esto es lo que hice cuando encontré el mismo problema que tuve que instalar primero expose-loader en mis módulos de nodo y luego agregar el siguiente bloque de prueba como uno de los elementos en las reglas de webpack.config.js.

npm install --save-dev expose-loader { test: require.resolve(''jquery''), use: [{ loader: ''expose-loader'', options: ''jQuery'' }, { loader: ''expose-loader'', options: ''$'' } ] }

Una vez hecho esto, npm ejecuta construir de nuevo. codificación feliz (''.-.''). Créditos a @thargenediad por pistas.

Answer 3

El complemento no es necesario. Solo usa lo siguiente como entrada:

entry: [
    ''jquery'', //will load jquery from node_modules
    ''./assets/js/index'',
]

Luego en el uso de archivos ES6 +:

import $ from "jquery";

Answer 4

Lamento haber sacado una vieja pregunta, pero quiero compartir mis hallazgos con cualquier desarrollador futuro que pueda tener el mismo caso de uso que yo.

Tenía el requisito de crear solo un paquete de proveedores y no un paquete de aplicaciones para una aplicación AngularJS (1.7.2), utilizando Webpack 4 (4.16.4). Creo que porque solo estaba creando un paquete de proveedores, ninguna de las otras soluciones funcionó. Solo expose-loader funcionó para mí, así:

    // webpack.config.js
    module: {
        rules: [
            {
                test: require.resolve(''jquery''),
                use: [{
                        loader: ''expose-loader'',
                        options: ''jQuery''
                    },
                    {
                        loader: ''expose-loader'',
                        options: ''$''
                    }
                ]
            }
        }

Para obtener más información: https://github.com/webpack-contrib/expose-loader

Answer 5

Sé que esto es un poco viejo, pero me las arreglé para hacerlo así:

global.jQuery = require (''jquery''); require (''bootstrap'');