折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。
我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。
module模块代码：
— base.js —
export default {
msg: 'Hello World!',
objClick: function() {
console.log('Obj.clickFunction');
return 'Obj.clickFunction';
}
}
webpack的entry文件：
— home.js —
import base from './base.js';
function myFunction() {
let objClickVal = base.objClick();
console.log('objClickVal:', objClickVal);
return ;
}
console.log('base.msg:', base.msg);
console.log('base.objClick:', base.objClick);
webpack配置：
module.exports = {
entry: {
home: './js/home.js',
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist',
}
}
home页面
部分：— home.html —
ObjClick
Base.ObjClick
npm运行webpack打包后，控制台显示：
base.msg: Hello World! home.bundle.js:124
base.objClick: ƒ () { home.bundle.js:126
console.log('Obj.clickFunction');
return 'Obj.clickFunction';
}
base.msg、base.objClick都显示出来了，证明module已经成功导入进来了，但是在点击button的时候显示：
Uncaught ReferenceError: myFunction is not defined
at HTMLButtonElement.onclick (home.html:18)
onclick @ home.html:18
Uncaught ReferenceError: base is not defined
at HTMLButtonElement.onclick (home.html:19)
onclick @ home.html:19
onclick无论是直接调用base对象里的函数，还是调用home.js里定义的函数，都显示未定义。。。究竟该怎么实现呢？？？
回答：
module中定义的函数不是全局的，改用事件监听
回答：
在window 写下一个全局函数
this.hanshu = function(){
return "hanshu!";
}
然后在你的html 标签内加上
οnclick=”hanshu()”;
即可。
今天遇到同样的问题，为了后端好绑，自己写个函数让他们调用去吧，我可不想闲着再命名了…哈哈哈
