gehören Drittanbieter-Bibliothek in Webpack

Question

Ich versuche, ein Plugin (freezeframe plugin) in meine App mit Webpack zu integrieren, aber ich bin nicht in der Lage zu verstehen, wie es geht. Ich serviere diese Datei lokal von meiner App und nicht von einem CDN oder NPM/Bower. Ich habe überall gesucht, um zu versuchen, das auszuarbeiten, bin aber nicht in der Lage, mir zu nähern.

meine webpack Datei sieht wie folgt aus:

const webpack = require('webpack'); 
const conf = require('./gulp.conf'); 
const path = require('path'); 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

module.exports = { 
    module: { 
    preLoaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint' 
     } 
    ], 

    loaders: [ 
     { 
     test: /.json$/, 
     loaders: [ 
      'json' 
     ] 
     }, 
     { 
     test: /\.gif$/, 
     loader: 'url-loader', 
     query: { mimetype: 'image/gif' } 
     }, 
     { 
     test: /\.svg$/, 
     loader: 'svg-loader?pngScale=2' 
     }, 
     { 
     test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, 
     loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' 
     }, 
     { 
     test: /\.(css|scss)$/, 
     loaders: [ 
      'style', 
      'css', 
      'sass', 
      'postcss' 
     ] 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: [ 
      'babel', 
     ] 
     }, 
     { 
     test: /.vue$/, 
     loaders: [ 
      'vue' 
     ] 
     } 
    ] 
    }, 
    vue: { 
    postcss: [ 
     require('autoprefixer')({ 
     browsers: [ 
      'Android >= 2.3', 
      'BlackBerry >= 7', 
      'Chrome >= 9', 
      'Firefox >= 4', 
      'Explorer >= 9', 
      'iOS >= 5', 
      'Opera >= 11', 
      'Safari >= 5', 
      'OperaMobile >= 11', 
      'OperaMini >= 6', 
      'ChromeAndroid >= 9', 
      'FirefoxAndroid >= 4', 
      'ExplorerMobile >= 9' 
     ] 
     }), 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin({ 
     template: conf.path.src('index.html') 
    }), 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jquery: 'jquery', 
     'window.jQuery': 'jquery', 
     jQuery: 'jquery', 
     slick: 'slick-carousel' 
    }) 
    ], 
    resolve: { 
    extensions: ['', '.js', '.css', '.scss'], 
    alias: { 
     'jQuery': path.join(__dirname, 'node_modules', 'jquery', 'dist', 'jquery') 
    } 
    }, 
    postcss:() => [autoprefixer({ 
    browsers: [ 
     'Android >= 2.3', 
     'BlackBerry >= 7', 
     'Chrome >= 9', 
     'Firefox >= 4', 
     'Explorer >= 9', 
     'iOS >= 5', 
     'Opera >= 11', 
     'Safari >= 5', 
     'OperaMobile >= 11', 
     'OperaMini >= 6', 
     'ChromeAndroid >= 9', 
     'FirefoxAndroid >= 4', 
     'ExplorerMobile >= 9' 
    ] 
    })], 
    debug: true, 
    devtool: 'source-map', 
    output: { 
    path: path.join(process.cwd(), conf.paths.tmp), 
    filename: 'index.js' 
    }, 
    entry: `./${conf.path.src('index')}` 
}; 

Ich dachte, ich require('./assets/freezeframe/freezeframe.js'); in meiner vue Komponente schreiben, aber es beschwert sich dann von jquery ist nicht definiert. Ich habe Jquery über npm installiert und ich bin schon mit einem anderen Plugin, das die Verwendung von Jquery wie dies tut:

import 'slick-carousel'; 
    const imagesLoaded = require('imagesloaded'); 

    export default { 
    name: 'Slider', 
    props: ['images', 'component'], 
    mounted() { 
     var that = this; 
     $(function() { 
     imagesLoaded('.js-component-slider',() => { 
      $(that.$el).slick({ 
      adaptiveHeight: true, 
      infinite: false 
      }); 
     }); 
     }); 
    } 
    } 

Ich bin jetzt nicht sicher, was zu tun ist. Ich möchte nicht einfach eine andere Jquery und die Plugin-Datei oben/unten in meiner index.html einfügen, weil ich sie gebündelt haben möchte.

Die einzige andere schmerzhafte Sache ist dieses Plugin ist nicht in npm und ich benutze nicht Bower.

UPDATE:

ich diese Frage gesehen haben add-js-file, aber ich habe versucht, das zu dem Plugin zu tun, aber immer noch einen Fehler davon bekommen nicht enthalten ist, wenn ich require (‚NameOfFile‘)

Answer 1

Nachdem ich den ganzen Tag gesucht hatte, fand ich heraus, dass ich das Plugin shimmen musste, da es nicht modules.export verwendet. shim plugin was bedeutete, dass ich das schreiben könnte: Sie würden auch exports-loader

const freezeframe = require("exports?freezeframe!./assets/freezeframe/freezeframe.js"); 

in meiner vue-Datei zu installieren. Ich war dann in der Lage, es zu benutzen, wie ich vorher war, als ich es in der index.html

hinzufügte