Webpack, переменная не определена

Question

У меня есть два файла: первый - uploader.js , в котором я делаю следующее:

var qq = {};

, а второй - app.js

var app = {};
// Create abc function and access qq variable
app.abc = function() {
 var u = $('.uploader');
 if(u.length > 0) {
  console.log(qq);
 }
}
$(function() {
 app.uploader();
});

После просмотра веб-пакет добавляет в оба файла код, похожий на следующий:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "/build/";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ({

/***/ "./assets/js/app.js":
/*!**************************!*\
  !*** ./assets/js/app.js ***!
  \**************************/
/*! no exports provided */
/*! all exports used */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_bootstrap__ = __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_bootstrap___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_bootstrap__);
console.log(__webpack_require__.s);

// My code goes here

/***/ })

/******/ });

app.js файл, используемый во всех шаблонах и загрузчик.js используется в конкретном шаблоне, например: если мне нужно uploader.js , я включаю тег в свой шаблон и, как app.js , вызываю функцию загрузчика и проверяю,класс загрузчика существует и вызовите qq var, затем он покажет qq не определен без веб-пакета, он отлично работает

теперь как получить доступ к переменной qq?

Вот наш webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
        // the project directory where compiled assets will be stored
        .setOutputPath('web/build/')
        // the public path used by the web server to access the previous directory
        .setPublicPath('/build')
        .cleanupOutputBeforeBuild()
        //.enableSourceMaps(!Encore.isProduction())
        // uncomment to create hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
        // uncomment for legacy applications that require $/jQuery as a global variable
        /*.autoProvidejQuery()
         .autoProvideVariables({
         "$": "jquery",
         "jQuery": "jquery",
         "window.jQuery": "jquery"
         })*/
        // uncomment to define the assets of the project        
        .addEntry('js/app', './assets/js/app.js')
        .addEntry('js/uploader', './assets/plugins/uploader/uploader.js')
        .addStyleEntry('css/app', ['./assets/css/icons.scss', './assets/css/app.scss'])
        .addStyleEntry('css/uploader', './assets/plugins/uploader/uploader.scss')

        // uncomment if you use Sass/SCSS files
        .enableSassLoader()
        .enableBuildNotifications();

module.exports = Encore.getWebpackConfig();

Answer 1

Если у вас есть контроль над файлами, лучше всего сделать свой javascript модульным, экспортировав переменную / объект / функцию.

// uploader.js
module.exports = { myvar: qq };

Затем импортируйте его в ваш app.js

import uploader from 'uploader.js'; 
console.log( uploader.myvar );` 

Если вы скажете, что у вас нет контроля над uploader.js, тогда webpack все равно может помочь вам, если вы скажете webpackПодберите значение: https://webpack.js.org/guides/shimming/

// webpack.config.js
...
plugins: [
  new webpack.ProvidePlugin({
    myvar: 'qq'
  })
]

И веб-пакет найдет для вас qq и сделает его доступным как myvar, где это необходимо.

Редактировать: Добавлен проверенный примерв symfony-core:

// I used the demo
composer create-project symfony/symfony-demo
cd symfony-demo
yarn add @symfony/webpack-encore --dev
yarn run encore dev --watch 
// and since windows, a separate console to serve the files
php bin/console server:run

// uploader.js (assuming a default jquery plugin)
$.fn.uploader = function() {
    this.css( "background-color", "green" );
};

// app.js
import './uploader.js';

// Create abc function and access qq variable
var app = {};
app.abc = function() {
    $('.container').uploader();
}

$(function() {
    app.abc(); // background should turn green
});

---

edit: обновлено с репозиторием из комментариев: добавлено module.exports = qq; в конце fileuploader.js, потому что действительно намного проще работать с модулями, чем shimming.

import qq from "../file-uploader/client/fileuploader.js"; 
var uploader = new qq.FileUploader({ 
    element: document.getElementById("file-uploader"),
    action: "/server/upload" 
});