Javascript 使用webpack将多个ES6类捆绑到一个文件中，以便在脚本标记中导入_Javascript_Node.js_Npm_Webpack_Webpack 2

Javascript 使用webpack将多个ES6类捆绑到一个文件中，以便在脚本标记中导入

javascript node.js npm webpack

Javascript 使用webpack将多个ES6类捆绑到一个文件中，以便在脚本标记中导入,javascript,node.js,npm,webpack,webpack-2,Javascript,Node.js,Npm,Webpack,Webpack 2,现在已经三天了，我正试图理解webpack以执行一项简单的任务（当然，在三天的时间里，我可以手工完成），但为了学习webpack并能够扩大规模我带着一个绝望的问题来到这里，这个问题可能与这个人试图实现的目标有关，但他的解决方案对我不起作用问题很简单，我有三门课： /src/class1.js export default class One { constructor() { this.isHorrible = true } whatIsHorrible() {

现在已经三天了，我正试图理解webpack以执行一项简单的任务（当然，在三天的时间里，我可以手工完成），但为了学习webpack并能够扩大规模

我带着一个绝望的问题来到这里，这个问题可能与这个人试图实现的目标有关，但他的解决方案对我不起作用

问题很简单，我有三门课：

/src/class1.js

export default class One {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

class Two {
  iMSoFat() {
    this.fatness = 88
    return (this.fatness)
  }
}

export { Two }

class Three {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

export { Three }

const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')


export { class1, class2, class3 }

/src/class2.js

export default class One {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

class Two {
  iMSoFat() {
    this.fatness = 88
    return (this.fatness)
  }
}

export { Two }

class Three {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

export { Three }

const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')


export { class1, class2, class3 }

/src/class3.js

export default class One {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

class Two {
  iMSoFat() {
    this.fatness = 88
    return (this.fatness)
  }
}

export { Two }

class Three {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

export { Three }

const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')


export { class1, class2, class3 }

我想在index.html页面中执行以下操作：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test ton cul</title>
    <script src="./lib/ebjs.js" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript">
      console.log(One, Two, Three);
    </script>
  </body>
</html>

所以我尝试了几次配置，我将不告诉你我经历过的令人遗憾的细节和挫折。。。缺乏睡眠和食物

我花了很长时间试图让数组入口点工作。。。但是我在文档的某个地方读到了“如果你传递了一个数组：所有模块在启动时都被加载，最后一个模块被导出。” 这解释了很多。。。不知怎的，我总是班上只有一个人。。。。不管这意味着什么。。。为什么会这样？这对我来说毫无意义。。。无论如何。。。但即便如此，我得到的类也不是library.class（）或window.class（）或class（）的形式

所以过了一会儿，我想，让我们加载index.js中的所有内容并将其导出

我第一次尝试ES6导入的风格，因为为什么不。但是，

import{One}from./src/class1'

不知何故不起作用，只是在未定义的导出上生成一个束。。Like window.library.One=未定义

因此，我在满足于这个index.js之前又花了一段时间：

index.js

export default class One {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

class Two {
  iMSoFat() {
    this.fatness = 88
    return (this.fatness)
  }
}

export { Two }

class Three {
  constructor() {
    this.isHorrible = true
  }

  whatIsHorrible() {
    return (this)
  }
}

export { Three }

const class1 = require('./src/class1')
const class2 = require('./src/class2')
const class3 = require('./src/class3')


export { class1, class2, class3 }

我的网页配置有了很大的变化，但我现在使用的是：

webpackrc.config.babel.js

const libraryName = 'ebjs'
const outputFile = `${libraryName}.js` 

export default {
  entry: './index.js',
  target: 'web',
  // entry: './index.js',
  devtool: 'source-map',
  output: {
    path: `${__dirname}/lib`,
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  module: {
    loaders: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
      },
    ],
  },
}

许多细节和试验/错误都是痛苦地进行的。。我写了一份实验记录。。也许我会在几个小时内扣动扳机之前与全世界分享

不管怎么说，它有点工作，但不像预期的那样，而且肯定不符合生产质量。要访问该类，我必须使用“newlibraryname.One.One（）”。如果我想把它捆绑到npm中，这对用户来说毫无意义。它仍然不能像预期的那样工作

以下是页面上对象的屏幕截图：

我希望有人来帮助我。我的生命可能真的取决于它：）

谢谢

编辑并结束

所以cbll的答案确实有效。。。我可以使用ES6IMPORT语句，并且类被正确地导出到包中。在html中，我可以使用

libraryName.class()

我创建了一个小型回购协议，如果有人与我处于相同的困境：

再次感谢cbll和Michael Jungo

在每个

classN.js

中，通过

导出默认类来导出每个类，或者在文件末尾，或者在文件开头（就像您在“一”示例中所做的那样，而不是在其他示例中）。在您的index.js
中，通过以下方式导入每一个：从“/classN.js”导入一个，当然假设它们位于同一文件夹中（如果不在，请添加正确的路径）。然后它将包含在您的main index.js中，并与Webpack捆绑在一起
在您的情况下，这意味着您的index.js将从以下内容开始：
import One from ('./src/class1.js')
import Two from ('./src/class2.js')
import Three from ('./src/class3.js')

这是假设您导出所有类，如示例中的One
，因此：
导出默认类1{
//代码位于此处

导出默认类2{
//代码位于此处

导出默认类三{
//代码在这里
您基本上就在这里，但您似乎对导入
/导出
语法有点困惑
首先，以不同的方式导出类。在/src/class1.js
中，使用默认导出：导出默认类一{
，但在其他两个中，使用命名导出导出{two}
。要正确导入它们，您需要：
import One from './src/class1'
import { Two } from './src/class2'
import { Three } from './src/class3'

由于require
的工作原理不同于ES模块，因此与require等效的是：
const One = require('./src/class1').default;
const Two = require('./src/class2').Two;
const Three = require('./src/class3').Three;

然后，您只需使用以下工具将其导出：
export { One, Two, Three }

在index.html
中，您需要添加库前缀：
<script type="text/javascript">
  console.log(ebjs.One, ebjs.Two, ebjs.Three);
</script>


log（ebjs.One、ebjs.Two、ebjs.Three）；
是否有任何理由不能在每个文件中将类定义为var
，而只需在主js文件中从“/Class1”
导入Class1？我想您也可以用同样的方式导出类，但我不确定这是否“正确”ES6语法。我不确定我现在是爱你还是恨你…但是是的。这就是我的意思！我和我的心智都在感谢你。你的帮助将使你在GitHub上成为永恒。酷酷的人，很乐意帮助。我将添加它作为一个答案，请接受：-）轻微的更正！工作原理就像你在评论中提到的：定义常量一=类一（）然后导出导出{One}。不适用于导出默认值。您必须选择一种方法并坚持使用它。当您将one
类定义为默认值时，您已经导出了它，其中asTwo
和Two
在函数创建后导出方式不同。是的，但这不起作用…如果需要，您可以检查repo。您的第一个insight是更新答案的好方法。将您的类创建更改为我编写的内容，并以这种方式导入-它应该可以工作：-）不客气。学习Javascript和Webpack可能会影响您的健康..：-）