使用ECMA6和Webpack4的自定义Javascript库

我的sum.js文件如下

var mathOp = {
            sum : function(a,b){
                return a+b;
            }
        }     
export default mathOp;

我的index.js文件如下（稍后将有多个导入文件和树震动）

我使用webpack为上述两个文件创建了一个bundle文件bundle.js，并在index.html文件中调用了bundle.js，如下所示

<script type="text/javascript" src="/bundle.js"></script></body>

 <script type="text/javascript">
    $(document).ready(function(){
      var result = mathOp.sum(2,5);
      console.log(result); 
 });        
 </script>

现在我想在index.html文件中调用mathOp.sum函数，如下所示

<script type="text/javascript" src="/bundle.js"></script></body>

 <script type="text/javascript">
    $(document).ready(function(){
      var result = mathOp.sum(2,5);
      console.log(result); 
 });        
 </script>

$（文档）.ready（函数（）{
var结果=数学和（2,5）；
控制台日志（结果）；
});        

---

但我做不到？有谁能指导我怎么做吗？

正如@loganfsmyth所指出的那样 默认情况下，webpack不能公开bundle.js中的任何函数

为此，我们需要将JS文件配置为webpack.config.JS中的库，如下所示

module.exports = {
  //...
  output: {
    library: 'MyBundle'
  }
}

现在我们可以使用和函数如下

<script type="text/javascript">
    $(document).ready(function(){
      var result = MyBundle.mathOp.sum(2,5);
      console.log(result); 
 });        
</script>

$（文档）.ready（函数（）{
var结果=MyBundle.mathOp.sum（2,5）；
控制台日志（结果）；
});        

---

如需进一步参考，请参考

如果有错误，您能给出您得到的错误吗？未捕获的引用错误：mathOp未定义可能的副本我相信问题在于捆绑包被封装。因此，在全局对象上实际上没有导出。您应该将依赖于

mathOp

的代码移动到单独的文件中，导入

mathOp

并将该文件也绑定。您是否已将Webpack配置为创建

mapOp

全局文件？默认情况下，Webpack不会这样做，您必须使用