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 ，我在我的模板中添加了标签，并且像 app.js 一样调用上传器功能并检查上传器类是否存在并调用 qq < / strong> 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

如果您可以控制文件，最好通过导出变量/对象/函数来使您的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
});

编辑：使用评论中的repo进行更新：在fileuploader.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，变量未定义

1 个答案: