Добавление Jquery в пакет с веб-пакетом

Question

Я пытаюсь связать мой скрипт с jQuery, который необходим для его работы. Это фрагмент, который другие веб-мастера должны вставить на свой веб-сайт, поэтому я не хочу, чтобы он мешал работе любого jQuery, который они могут запускать.

Я следовал инструкциям следующим образом:

const webpack = require('webpack');
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
});
const path = require('path');

module.exports = (env, options) => ({
  entry: "./clickscape.js",
  output: {
    path: path.resolve(__dirname, '../priv/static/js'),
    filename: 'clickscape-bundle.js'
  }
});

У меня также есть следующий package.json:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch-stdin --progress --color"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "4.4.0",
    "webpack-cli": "^2.0.10"
  }
}

Он собирается без ошибок, но jQuery не доступен для моего финального скрипта. Что я делаю не так?

Answer 1

Вы должны добавить jquery к массиву плагинов в webpack.config.js, как показано ниже.

Это позволит веб-пакету глобально внедрить объект jquery во все файлы js в графе зависимостей

./webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports={
    entry:{
        index : "./src/index.js"
    },
    output :{
        filename : "[name].js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            divine:'jquery'
        })
    ]
}

Создайте js-пакет с приведенной ниже инструкцией и проверьте результат. Доступ к служебным функциям, предоставляемым jquery, можно получить с помощью $ или jQuery или divine. Вы можете использовать любой из них или все из них.

./src/index.js

console.log("jquery object ",jQuery);
console.log("jquery $ ",$);
console.log("jquery divine ",divine)