JQuery für Bootstrap wird nicht ordnungsgemäß mit WebPack und Angular2 geladen

Question

Ich verbrachte auf diese viele Stunden bereits mit Null Glück.

Ich brauche Bootstrap js, die jQuery erfordert. Es scheint mir, dass diese beiden Bibliotheken geladen sind (zumindest kann ich $ in der Konsole verwenden), aber jQuery und jquery in der Chrome-Konsole funktionieren nicht.

Mein package.json

  { 
       "name": "myproj", 
       "version": "0.0.0", 
       "description": "myproj", 
       "private": true, 
       "cacheDirectories": [ 
       "node_modules" 
       ], 
       "dependencies": { 
       "@angular/common": "2.4.4", 
       "@angular/compiler": "2.4.4", 
       "@angular/core": "2.4.4", 
       "@angular/forms": "2.4.4", 
       "@angular/http": "2.4.4", 
       "@angular/platform-browser": "2.4.4", 
       "@angular/platform-browser-dynamic": "2.4.4", 
       "@angular/router": "3.4.4", 
       "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.15", 
       "angular2-cookie": "1.2.6", 
       "angular2-infinite-scroll": "0.2.9", 
       "jquery": "^3.1.1", 
       "bootstrap": "^3.3.7", 
       "bootstrap-sass-loader": "^1.0.10", 
       "codemirror": "5.23.0", 
       "core-js": "2.4.1", 
       "font-awesome": "4.7.0", 
       "hammerjs": "2.0.8", 
       "imports-loader": "^0.7.0", 
       "ng-jhipster": "0.1.6", 
       "ng2-webstorage": "1.5.0", 
       "reflect-metadata": "0.1.9", 
       "rxjs": "5.0.3", 
       "sockjs-client": "1.1.1", 
       "swagger-ui": "2.2.10", 
       "tether": "1.4.0", 
       "webstomp-client": "1.0.3", 
       "zone.js": "0.7.6" 
       }, 
       "devDependencies": { 
       "@types/jasmine": "2.5.41", 
       "@types/node": "7.0.1", 
       "@types/selenium-webdriver": "2.53.33", 
       "add-asset-html-webpack-plugin": "1.0.2", 
       "angular-cli": "1.0.0-beta.26", 
       "angular2-template-loader": "0.6.0", 
       "awesome-typescript-loader": "3.0.0-beta.18", 
       "bootstrap-loader": "^2.0.0-beta.20", 
       "bootstrap-sass": "^3.3.7", 
       "browser-sync": "2.18.6", 
       "browser-sync-webpack-plugin": "1.1.3", 
       "codelyzer": "2.0.0-beta.4", 
       "copy-webpack-plugin": "4.0.1", 
       "css-loader": "^0.26.1", 
       "del": "2.2.2", 
       "event-stream": "3.3.4", 
       "exports-loader": "0.6.3", 
       "extract-text-webpack-plugin": "2.0.0-beta.5", 
       "file-loader": "0.9.0", 
       "generator-jhipster": "4.0.1", 
       "html-webpack-plugin": "2.26.0", 
       "image-webpack-loader": "3.1.0", 
       "jasmine-core": "2.5.2", 
       "jasmine-reporters": "2.2.0", 
       "jquery": "^3.1.1", 
       "karma": "1.4.0", 
       "karma-chrome-launcher": "2.0.0", 
       "karma-coverage": "1.1.1", 
       "karma-jasmine": "1.1.0", 
       "karma-junit-reporter": "1.2.0", 
       "karma-phantomjs-launcher": "1.0.2", 
       "karma-remap-istanbul": "0.4.0", 
       "karma-sourcemap-loader": "0.3.7", 
       "karma-webpack": "2.0.1", 
       "lazypipe": "1.0.1", 
       "lodash": "4.17.4", 
       "map-stream": "0.0.6", 
       "node-sass": "^4.5.0", 
       "phantomjs-prebuilt": "2.1.14", 
       "protractor": "4.0.11", 
       "protractor-jasmine2-screenshot-reporter": "0.3.2", 
       "proxy-middleware": "0.15.0", 
       "raw-loader": "0.5.1", 
       "resolve-url-loader": "^1.6.1", 
       "run-sequence": "1.2.2", 
       "sass-loader": "^4.1.1", 
       "sourcemap-istanbul-instrumenter-loader": "0.2.0", 
       "string-replace-webpack-plugin": "0.0.5", 
       "style-loader": "^0.13.1", 
       "to-string-loader": "1.1.5", 
       "ts-node": "1.7.1", 
       "tslint": "4.3.1", 
       "tslint-loader": "3.3.0", 
       "typescript": "2.1.5", 
       "url-loader": "^0.5.7", 
       "webpack": "2.2.0", 
       "webpack-dev-server": "2.2.0", 
       "webpack-merge": "2.4.0", 
       "webpack-visualizer-plugin": "0.1.10", 
       "write-file-webpack-plugin": "3.4.2", 
       "yargs": "6.6.0" 
       }, 
       "engines": { 
       "node": ">=6.9.0" 
       }, 
       "scripts": { 
       "lint": "tslint src/main/webapp/app/**/*.ts --force", 
       "lint:fix": "tslint src/main/webapp/app/**/*.ts --fix --force", 
       "tsc": "tsc", 
       "tsc:w": "tsc -w", 
       "start": "npm run webpack:dev", 
       "webpack:build": "webpack --config webpack/webpack.vendor.js && webpack --config webpack/webpack.dev.js", 
       "webpack:build:dev": "webpack --config webpack/webpack.dev.js", 
       "webpack:dev": "webpack-dev-server --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060", 
       "webpack:prod": "npm test && webpack -p --config webpack/webpack.vendor.js && webpack -p --config webpack/webpack.prod.js", 
       "test": "npm run lint && karma start src/test/javascript/karma.conf.js", 
       "test:watch": "karma start --watch", 
       "e2e": "protractor src/test/javascript/protractor.conf.js", 
       "postinstall": "webdriver-manager update && npm run webpack:build" 
       } 
      } 

mein webpack.common.js

  const webpack = require('webpack'); 
      const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 
      const CopyWebpackPlugin = require('copy-webpack-plugin'); 
      const HtmlWebpackPlugin = require('html-webpack-plugin'); 
      const StringReplacePlugin = require('string-replace-webpack-plugin'); 
      const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); 
      const path = require('path'); 

      module.exports = function (options) { 
       const DATAS = { 
        VERSION: JSON.stringify(require("../package.json").version), 
        DEBUG_INFO_ENABLED: options.env === 'dev' 
       }; 
       return { 
        entry: { 
         'polyfills': './src/main/webapp/app/polyfills', 
         'global': './src/main/webapp/content/css/global.css', 
         'main': './src/main/webapp/app/app.main' 
        }, 
        resolve: { 
         extensions: ['.ts', '.js'], 
         modules: ['node_modules'] 
        }, 
        module: { 
         rules: [ 
          { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' }, 
          { 
           test: /\.ts$/, 
           loaders: [ 
            'angular2-template-loader', 
            'awesome-typescript-loader' 
           ], 
           exclude: ['node_modules/generator-jhipster'] 
          }, 
          { 
           test: /\.html$/, 
           loader: 'raw-loader', 
           exclude: ['./src/main/webapp/index.html'] 
          }, 
          { 
           test: /\.css$/, 
           loaders: ['to-string-loader', 'css-loader'], 
           exclude: /(vendor\.css|global\.css)/ 
          }, 
          { 
           test: /(vendor\.css|global\.css)/, 
           loaders: ['style-loader', 'css-loader'] 
          }, 
          { 
           test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i, 
           loaders: [ 
            'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 
            'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
           ] 
          }, 
          { 
           test: /app.constants.ts$/, 
           loader: StringReplacePlugin.replace({ 
            replacements: [{ 
             pattern: /\/\* @toreplace (\w*?) \*\//ig, 
             replacement: function (match, p1, offset, string) { 
              return `_${p1} = ${DATAS[p1]};`; 
             } 
            } 
           ]}) 
          } 
         ] 
        }, 
        plugins: [ 
         new CommonsChunkPlugin({ 
          names: ['manifest', 'polyfills'].reverse() 
         }), 
         new webpack.DllReferencePlugin({ 
          context: './', 
          manifest: require(path.resolve('./build/www/vendor.json')), 
         }), 
         new CopyWebpackPlugin([ 
          { from: './node_modules/swagger-ui/dist', to: 'swagger-ui/dist' }, 
          { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' }, 
          { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' }, 
          { from: './src/main/webapp/robots.txt', to: 'robots.txt' }, 
          { from: './src/main/webapp/i18n', to: 'i18n' } 
         ]), 
         new webpack.ProvidePlugin({ 
           $: 'jquery', 
           jQuery: 'jquery', 
           'window.jQuery': 'jquery' 
         }), 

         new HtmlWebpackPlugin({ 
          template: './src/main/webapp/index.html', 
          chunksSortMode: 'dependency', 
          inject: 'body' 
         }), 
         new AddAssetHtmlPlugin([ 
          { filepath: path.resolve('./build/www/vendor.dll.js'), includeSourcemap: false } 
         ]), 
         new StringReplacePlugin() 
        ] 
       }; 
      }; 

mein vendor.ts

  /* tslint:disable */ 
      import '../content/css/vendor.css'; 
      import 'jquery' 

      import 'bootstrap/dist/js/bootstrap'; 

erzeugte ich dieses Projekt mit jHipster und Angular2 Unterstützung.

Ich erhalte diese Ausnahme in Chrome

  Error: Bootstrap's JavaScript requires jQuery at Object.<anonymous> (http://localhost:8080/vendor.dll.js:107411:9) [<root>] at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30) 

Answer 1

ich überwunden habe gerade das gleiche Problem.

Dies liegt daran, dass Webpack den jQuery-Code als Modul umschließt und verhindert, dass die globale Variable undicht wird, z. B. "$" und "jQuery".

Der offizielle hat eine Anleitung für diese Probleme relevant für die Kompatibilität über AMD/CommonJS/global Skript. Hör zu.

https://webpack.js.org/guides/shimming/

Kurz gesagt, ich denke, webpack.ProvidePlugin eine gute Lösung ist:

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery' 
    }) 
], 

---

Sorry, ich habe dich vermisst Wepback konfiguriert haben ProvidePlugin zu verwenden. Aber in meiner Seite, importiere ich BS3, wie unten lassen Webpack lösen sie node_modules/Bootstrap/dist/js/npm:

import "bootstrap";