使用 ECMA 6 和 webpack 4 的自定义 Javascript 库

Question

我的 sum.js 文件如下

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

我的 index.js 文件如下（稍后会有多个导入文件和 tree shaking）

import mathOp from "./sum";
export default mathOp;

我已经使用 webpack 为以上两个文件制作了一个捆绑文件 bundle.js，并在 index.html 文件中调用了 bundle.js，如下所示

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

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

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

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

Answer 1

正如@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>

更多参考，请参考https://webpack.js.org/configuration/output/#output-library

使用 ECMA 6 和 webpack 4 的自定义 Javascript 库

Custom Javascript library using ECMA 6 and webpack 4

javascript

ecmascript-6

webpack-4