Problem beim Hinzufügen von Jquery zum Webpack

Question

Ich bin neu im Webpack. Ich habe durch https://github.com/vuejs/vue-cli installiert Ich verstehe nicht ganz, wie man jquery Abhängigkeit hinzufügen. Ich habe fast jedes Tutorial ausprobiert, das ich finden konnte und nichts scheint zu funktionieren.

Ich benutze Bootstrap und es hält die Ausgabe eines Konsolenfehlers bootstrap erfordert Jquery.

in meinem node_modules/Ordner habe ich Jquery dort.

Ich verstehe nicht genau, wo der Einstiegspunkt für das Projekt ist. Ich glaube, es packages.json ist, damit ich dort habe ich

"scripts": { 
    "dev": "node build/dev-server.js", 
    "build": "node build/build.js", 
    "lint": "eslint --ext .js,.vue src" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.1", 
    "vee-validate": "^2.0.0-beta.18", 
    "vue": "^2.1.0", 
    "vue-resource": "^1.0.3", 
    "vue-router": "^2.1.1" 
    }, 

dann

in meine Skripte Abschnitt beginnen, wenn ich das richtig inder ‚dev‘ Modus lese ich bauen/dev-server.js als Einstiegspunkt.

require('./check-versions')() 
var config = require('../config') 
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 
var path = require('path') 
var express = require('express') 
var webpack = require('webpack') 
var opn = require('opn') 
var proxyMiddleware = require('http-proxy-middleware') 
var webpackConfig = require('./webpack.dev.conf') 

In diesem Codeblock i versucht haben, das Hinzufügen var jquery = require('jquery') aber, dass das Problem nicht lösen.

dann ist der nächste Port des Eingangs glaube ich die Webpack-Basis.

, die ich

var path = require('path') 
var config = require('../config') 
var utils = require('./utils') 
var projectRoot = path.resolve(__dirname, '../') 
var webpack = require('webpack'); 

var jquery = require("jquery"); 

var env = process.env.NODE_ENV 
// check env & config/index.js to decide whether to enable CSS source maps for the 
// various preprocessor loaders added to vue-loader at the end of this file 
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) 
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) 
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd 

module.exports = { 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: config.build.assetsRoot, 
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 
    filename: '[name].js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.vue', '.json'], 
    fallback: [path.join(__dirname, '../node_modules')], 
    alias: { 
     jquery: "jquery/src/jquery", 
     'vue$': 'vue/dist/vue.common.js', 
     'src': path.resolve(__dirname, '../src'), 
     'assets': path.resolve(__dirname, '../src/assets'), 
     'components': path.resolve(__dirname, '../src/components') 
    } 
    }, 
    resolveLoader: { 
    fallback: [path.join(__dirname, '../node_modules')] 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'eslint', 
     include: [ 
      path.join(projectRoot, 'src') 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(js|min.js)$/, 
     loader: 'eslint', 
     include: [ 
      path.join(projectRoot, 'src') 
     ], 
     exclude: /node_modules/ 
     }, 
    ], 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue' 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     include: [ 
      path.join(projectRoot, 'src') 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: require.resolve("jquery"), 
     loader: "expose?$!expose?jQuery" }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
     } 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
    ], 
    eslint: { 
    formatter: require('eslint-friendly-formatter') 
    }, 
    vue: { 
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), 
    postcss: [ 
     require('autoprefixer')({ 
     browsers: ['last 2 versions'] 
     }) 
    ] 
    } 
} 

, die ich versucht haben, das Hinzufügen der an der Spitze erfordern, sowie die Entschlossenheit alias, und das Plugin für Jquery, die ich alle aus anderen Tutorials bekam. Aber nichts scheint zu funktionieren. Was mache ich falsch?

Answer 1

Addiert man diese in webpack.base.conf.js

Vor Modul exportiert var webpack = require('webpack') Neben:

resolve:{ 
//other code 
plugins:[ 
    new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery:'jquery', 
    jquery:'jquery' 
    }), 
], 
//other code 
} 

Stellen Sie sicher, jquery über npm install jquery mit der speziellen Version installieren Sie benötigen. Der obige Code platziert die 3 Namen unter dem Fensterobjekt und Sie erhalten Zugriff auf jquery global, als ob Sie es als Skript-Tag importiert hätten.