Требовать jQuery-плагин с Webpack

Я хочу использовать Webpack, чтобы создать один файл scripts.js из всех необходимых файлов Javascript.

В моем main.js мне требуются три модуля:

require('jquery');
require('readmore');
require('foundation');

Мой webpack.config.js это:

var path = require('path');

module.exports = {
    entry: ["./js/main.js"],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "scripts.js"
    },
    resolve: {
        modulesDirectories: ["bower_components", "node_modules"],
        alias: {
            jquery: '../bower_components/jquery/dist/jquery.js',
            readmore: '../node_modules/readmore-js/readmore.js',
            foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
        }
    }
}

Моя проблема: поскольку readmore-js является jQuery-плагином, он сам требует jQuery. Я получил эту ошибку после запуска Webpack:

ERROR in ./~/readmore-js/readmore.js
Module not found: Error: Can't resolve 'jquery' in '/Users/myName/www/myProject/node_modules/readmore-js'
 @ ./~/readmore-js/readmore.js 17:4-31
 @ ./js/main.js
 @ multi main

Насколько я понимаю, проблема в том, что readmore также хочет загрузить модуль jQuery в каталог «nodes_modules». Мой первый подход состоял в том, чтобы решить эту проблему, добавив moduleDirectories в файл конфигурации, но это все еще не работает. И даже в этом случае плагин не должен повторно загружать jQuery.

У вас есть идеи, как я могу загрузить jQuery глобально, а затем "сказать" всем модулям, которым требуется jQuery, "посмотрите, это там!"

Как это может помочь, следующее копируется из readmore.js плагина:

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}

webpack webpack-2 jquery-plugins
person to7be    schedule 09.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Для этого вы можете использовать webpack.ProvidePlugin:

Удалить требуемый jquery из main.js:

require('readmore');
require('foundation');

Настройте webpack.ProvidePlugin внутри webpack.config.js:

var path = require('path');

module.exports = {
    entry: ["./js/main.js"],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "scripts.js"
    },
    resolve: {
        modulesDirectories: ["bower_components", "node_modules"],
        alias: {
            readmore: '../node_modules/readmore-js/readmore.js',
            foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
        }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
    ]
}
person Tom Van Rompaey    schedule 09.03.2017
comment
Спасибо за ваш ответ, команда webpack работает! Но у меня возникла проблема с запуском scripts.js, поскольку я больше не могу получить доступ к плагину: Uncaught TypeError: $(...).readmore is not a function at Object.<anonymous> [...] Думаю, у меня все еще есть проблема с глобальными переменными? - person to7be; 09.03.2017
comment
У меня похожая проблема. Это довольно загадка, как одни плагины загружаются, а другие нет. У меня есть существующий проект, но я не могу понять, почему одни работают, а другие нет. - person Wouter; 20.07.2017