Как получить доступ к объекту jQuery ($) в файле ввода при использовании Webpack 4? - PullRequest
Новая
       7

Как получить доступ к объекту jQuery ($) в файле ввода при использовании Webpack 4?

0 голосов
/ 02 сентября 2018

У меня есть очень простой пример Webpack 4, где я пытаюсь получить доступ к объекту jQuery в моем файле ввода, чтобы манипулировать DOM. Я сократил это до того, что, как мне кажется, является абсолютным минимумом, который тщательно исследовал.

Я ожидаю, что пример установит голубой цвет фона body при загрузке страницы. Не могу заставить его сделать что-нибудь. Похоже, переменная $, представленная в файле ввода, является , а не той же переменной $ в браузере.

ОБНОВЛЕНИЕ - ПРОБЛЕМА РЕШЕНА : я неправильно использовал jQuery ниже.

Оригинал (дефектный) входной файл (src/app.js): 

import 'jquery';

$(() => {
  $('body').bgColor = 'cyan';
});

Исправлено Запись: 

import 'jquery';

$(() => {
  $('body').css('background-color', 'cyan');
});

Я использую ProvidePlugin как задокументировано здесь . Вот мой простой webpack.config.js файл: 

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

module.exports = {
  entry: {
    app: './src/app.js',
  },
    output: {
      filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      new HtmlWebpackPlugin()
    ],
    devtool: 'inline-source-map'
}

Webpack прекрасно компилируется, и страница открывается (с использованием webpack-dev-server), но цвет фона не меняется на голубой, как ожидалось. Когда я записываю значение $('body') в файл app.js, я получаю undefined.

Вот файл package.json: 

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --inline --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

Чувствуется, что у меня полное отсутствие понимания того, как это должно работать. Благодарю. Ваша помощь очень ценится.

1 Ответ

0 голосов
/ 02 сентября 2018

Извиняюсь. Моя ошибка в неправильном использовании jQuery. Спасибо @charlietfl за указание на мою ошибку в комментариях. Я использовал. $('body').bgColor = "cyan" вместо $('body').css('background-color', 'cyan'). Все остальное правильно настроено. Так что если вам нужен простой пример, вот он.

Я отредактирую вопрос и укажу на свою ошибку.

...