में वेबपैक

Question

में तृतीय पक्ष लाइब्रेरी शामिल है, मैं वेबपैक का उपयोग करके अपने ऐप में एक प्लगइन (freezeframe plugin) शामिल करने का प्रयास कर रहा हूं लेकिन यह समझने में सक्षम नहीं हूं कि इसे कैसे किया जाए। मैं अपने ऐप से स्थानीय रूप से इस फाइल की सेवा कर रहा हूं, न कि सीडीएन या एनपीएम/बॉवर से। मैंने कोशिश की है और इसे पूरा करने के लिए पूरी तरह से खोज की है लेकिन करीब नहीं पहुंच पाई है।

मेरी webpack फ़ाइल इस तरह दिखता है:

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')}` 
}; 

मैंने सोचा था कि मैं अपने Vue घटक में require('./assets/freezeframe/freezeframe.js'); बारे में है, लेकिन यह तो jQuery की शिकायत परिभाषित नहीं है। मैं jQuery NPM के माध्यम से स्थापित किया है और मैं पहले से ही एक और है कि इस तरह उपयोग jQuery करता है प्लगइन का उपयोग कर रहा:

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 
      }); 
     }); 
     }); 
    } 
    } 

मैं अब क्या करना है यकीन नहीं है। मैं अपने index.html के शीर्ष/नीचे एक और jquery और प्लगइन फ़ाइल शामिल नहीं करना चाहता क्योंकि मैं इसे एक साथ बंडल करना चाहता हूं।

यह प्लगइन एनपीएम में नहीं है और मैं बोवर का उपयोग नहीं कर रहा हूं।

अद्यतन:

मैं इस सवाल add-js-file देखा है, लेकिन मैं प्लगइन करने के लिए कर रही है लेकिन अभी भी यह शामिल नहीं किया जा रहा जब मैं ('nameoffile')

Answer 1

की आवश्यकता होती है कोई त्रुटि मिलती है की कोशिश की है तो पूरे दिन खोज करने के बाद मुझे पता चला कि मुझे प्लगइन को झुका देना था क्योंकि यह मॉड्यूल.एक्सपोर्ट का उपयोग नहीं कर रहा है। shim plugin जिसका अर्थ यह है कि मैं इस लिख सकते हैं: तुम भी मेरी Vue फ़ाइल में exports-loader

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

स्थापित करने की आवश्यकता होगी। मैं तब इसका उपयोग करने में सक्षम था जैसे मैं index.html

में इसे जोड़ने के पहले था