我是Webpack的初学者,在回答之前请正确阅读我的问题。
我在文件中调用函数时遇到了一些问题,但在webpack监视后无法访问。
HTML
<script type="text/javascript" src="/build/js/app.js"></script>
<script type="text/javascript" src="/build/js/uploader.js"></script>
<script type="text/javascript">
$(function () {
console.log(qq);
});
</script>
如果我从 uploader.js 访问qq变量,则无效
Webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('web/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.configureFilenames({
css: 'css/[name].css',
js: 'js/[name].js'
})
.autoProvidejQuery()
.addEntry('app', './assets/js/app.js')
.addEntry('uploader', './assets/plugins/uploader/uploader.js')
.enableSassLoader()
.enableBuildNotifications();
module.exports = Encore.getWebpackConfig();
app.js
// @Path assets/js/app.js
require('./../css/app.scss');
import 'bootstrap';
const $ = require('jquery');
// create global $ and jQuery variables
global.$ = global.jQuery = $;
var app = {
uploader: function() {
var u = $('.uploader');
if (!u.length > 0)
return;
u.each(function () {
var that = $(this),
data = that.data();
// Defined in uploader.js
console.log(qq);
}
},
test: function() {
console.log('done');
}
}
变量qq在这里也无法访问,访问我尝试在 app.js
顶部import qq from './../../assets/plugins/uploader/uploader.js';
并使用那样的
console.log(qq.qq)
它按照这种方式工作,但我想要它,需要在脚本标记中包含 uploader.js ,并在需要时进行访问
uploader.js https://github.com/Valums-File-Uploader/file-uploader
// @Path assets/plugins/uploader/uploader.js
require('./uploader.scss');
qq.FileUploader = function (o) {
// call parent constructor
qq.FileUploaderBasic.apply(this, arguments);
// additional options
qq.extend(this._options, {
...
}
}
_onComplete: function (id, fileName, result) {
qq.FileUploaderBasic.prototype._onComplete.apply(this, arguments);
console.log(app.test());
}
这里我想从app.js调用app.test函数但是在webpack观看之后它也无法在此文件中访问
我需要知道,如何在每个javascript文件和html中的任何地方使所有函数/变量都能访问,就像没有webpack手表一样。因为如果我不使用webpack,一切都运行良好,可以访问js和html中的任何地方,但我想使用webpack
那么请帮忙吗?