web-dev-qa-db-fra.com

"jquery n'est pas défini" lors de l'utilisation de Webpack pour charger le démarrage

Je commence tout juste à apprendre à utiliser Webpack (auparavant, j'utilisais simplement la méthode manuelle pour inclure des scripts individuels séparément). Et j’ai utilisé bootstrap-loader pour charger bootstrap. Voici mon 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',
    },
}

Et voici mon entry.js

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

Cela semble fonctionner. Cependant, je l'ai utilisé auparavant et cela n'a pas fonctionné:

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

J'ai trouvé la ligne ci-dessus suggérée par tant de personnes. Mais je reçois simplement des erreurs lors du chargement de la page. Quelques exemples: une SO question , problème avec Webpack , une autre SO question .

Plus tard, j'ai trouvé cette question , et cette question . La page fonctionne donc avec la fonctionnalité bootstrap js.

J'ajouterai mon package.json au cas où il serait pertinent:

{
  "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"
  }
}

Je suis nouveau sur WebPack mais je ne suis pas nouveau sur JS. Je me demande pourquoi window.$ ne fonctionne pas.

Et je me demande, pour webpack, pourquoi certaines personnes ont suggéré cela dans les plugins:

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

Certaines personnes suggèrent ceci (cela n'a pas fonctionné pour moi non plus):

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

Je jouais avec node depuis quelque temps et je me souvenais que ce noeud utilise la requête js pour le chargement (je ne suis pas très clair sur les différences entre common vs require vs AMD cependant). Mais pourquoi certaines personnes mentionnent js commun?

Je développais back-end depuis un certain temps et je venais juste de commencer le front-end - de nombreuses questions surgissent. Cela suffirait si vous me fournissiez un lien vers un guide à lire qui puisse dissiper mes doutes/renforcer ma compréhension de base de ces derniers.

javascriptjquerynode.jstwitter-bootstrapwebpack
24
Junchao Gu

Ajouter ceci en tant que plugin

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

et vous devriez pouvoir avoir jquery dans tout votre projet.

Si le problème persiste après l'ajout du plug-in, essayez de redémarrer votre serveur nodejs. N'oubliez pas d'installer jquery en utilisant npm install --save jquery.

46
Jorawar Singh

Le plugin n'est pas nécessaire. Utilisez juste ce qui suit comme entrée:

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

Ensuite, dans le fichier ES6 +, utilisez:

import $ from "jquery";
9
Niels Steenbeek

Je sais que c'est un peu vieux, mais j'ai réussi à le faire comme ça:

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

7
CodeHacker

Je suis désolé de ramasser une vieille question, mais je souhaite partager mes conclusions avec tout futur développeur qui pourrait avoir le même cas d'utilisation que moi.

J'avais l'obligation de créer uniquement un ensemble de fournisseurs et non un ensemble d'applications pour une application AngularJS (1.7.2), à l'aide de Webpack 4 (4.16.4). Je pense que comme je ne créais qu'un ensemble de fournisseurs, aucune des autres solutions ne fonctionnait. Seul expose-loader a fonctionné pour moi, comme suit:

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

Pour plus d'informations: https://github.com/webpack-contrib/expose-loader

2
thargenediad

Voici donc ce que j'ai fait lorsque je suis tombé sur le même problème Je devais d'abord installer expose-loader dans mes modules de nœud, puis ajouter le bloc de test ci-dessous comme l'un des éléments du fichier webpack.config .js règles . 

 npm install --save-dev  expose-loader



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

Une fois cela fait, npm lance build again. code heureux ('.-.'). crédits à @thargenediad pour des indices.

0
user1556937