我有两个文件，第一个是 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();
答案 0 :(得分：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"
});