Подтвердить что ты не робот

"jquery не определен" при использовании webpack для загрузки начальной загрузки

Я только начинаю учиться использовать Webpack (ранее я просто использовал ручной способ включения отдельных скриптов отдельно). И я использовал bootstrap-loader для загрузки бутстрапа. Вот мой webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,

    entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            { test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css
            // images
            { test: /\.png$/, loader: 'url-loader?limit=100000'},
            { test: /\.jpg$/, loader: 'file-loader'},
            // bootstrap image files
            { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ],
    },

    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx'],
        jquery: './vendor/jquery/jquery.js',
    },
}

И вот мой entry.js

global.jQuery = global.$ = require('jquery');
require('bootstrap-loader');

Кажется, это работает. Однако я использовал это раньше, и это не сработало:

window.jQuery = window.$ = require('jquery');

Я нашел линию выше, предложенную таким количеством людей. Но я просто получаю ошибки при загрузке страницы. Несколько примеров: какой-то вопрос SO, проблема с webpack, другой вопрос SO.

Позже я нашел этот вопрос и этот вопрос. Таким образом, на самом деле страница работает с функциональностью bootstrap js.

Я также добавлю свой пакет.json, если это будет уместно:

{
  "author": "franklingu",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "bootstrap-loader": "^1.2.0-beta.1",
    "bootstrap-sass": "^3.3.7",
    "extract-text-webpack-plugin": "^1.0.1",
    "jquery": "^3.1.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "webpack": "^1.13.1",
    "webpack-bundle-tracker": "0.0.93"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  }
}

Я новичок в webpack, но я не новичок в JS. Мне интересно, почему window.$ Не работает.

И мне интересно, для webpack, почему некоторые люди предложили это в плагинах:

        new webpack.ProvidePlugin({
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
        })

Некоторые люди предлагают это (я тоже не работал):

 resolve: {
    alias: {
        jquery: "jquery/src/jquery"
    }
}

Некоторое время я играл с узлом, и я вспомнил, что этот узел использует запрос js для загрузки (я не очень понимаю различия между обычными vs require vs amd, хотя). Но почему некоторые люди упоминают общие js?

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

4b9b3361

ОТВЕТЫ

Ответ 1

Добавьте это как плагин

  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })

и вы должны иметь jquery во всем своем проекте.

Если проблема возникает после добавления плагина, попробуйте перезапустить сервер nodejs. Не забудьте установить jquery с помощью npm install --save jquery.

Ответ 2

Плагин не нужен. Просто используйте следующую запись:

entry: [
    'jquery', //will load jquery from node_modules
    './assets/js/index',
]

Затем в файле ES6+ используйте:

import $ from "jquery";

Ответ 3

Я знаю, что это немного устарело, но мне это удалось:

global.jQuery = require ('jquery'); требует ( 'самонастройки');

Ответ 4

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

У меня было требование создавать только комплект поставщиков, а не комплект приложений для приложения AngularJS (1.7.2), используя Webpack 4 (4.16.4). Я думаю, потому что я только создавал пакет поставщиков, ни одно из других решений не работало. У меня работал только expose-loader, вот так:

    // webpack.config.js
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }
        ]
    }

Для получения дополнительной информации: https://github.com/webpack-contrib/expose-loader