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();
});

观看后，webpack 在两个文件中添加了一些类似这样的代码：

/******/ (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文件用于所有模板，uploader.js用于特定模板例如：如果我需要 uploader.js，我会在我的模板中包含 with 标签，然后 app.js 调用上传函数并检查是否上传者 class 存在并调用 qq var 然后它显示 qq 未定义 没有 webpack 它工作得很好

现在如何访问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

如果您可以控制这些文件，最好通过导出 variable/object/function 来使您的 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'
  })
]

并且 webpack 会为您找到 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
});

编辑：根据评论更新回购：在文件 uploader.js 的末尾添加了 module.exports = qq;，因为使用模块确实比填充东西容易得多。

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

Webpack，变量未定义

Webpack, variable is not defined

symfony

webpack

webpack-encore