Webpack问题,函数/变量无法访问

时间:2018-06-14 06:50:46

标签: javascript html webpack webpack-encore

我是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

那么请帮忙吗?

https://jsfiddle.net/u2saqxnp/6/

0 个答案:

没有答案