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

Question

现在已经三天了，我试图理解 webpack 来执行一个简单的任务（当然，在三天的过程中我可以手工完成）但是为了学习 webpack 并能够扩大规模...

我带着一个令人绝望的问题来问你，这可能与此人试图实现的目标有关 How do I concatenate and minify files using webpack，但他的解决方案对我不起作用。

问题很简单，我有三个类：

./src/class1.js

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

  whatIsHorrible() {
    return (this)
  }
}

./src/class2.js

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

export { Two }

./src/class3.js

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

  whatIsHorrible() {
    return (this)
  }
}

export { Three } 

我想做的是在 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>

我也会满意

new window.One() 
//.. or EVEN 
new window.ebjs.One() 

所以我尝试了几个配置，我会省去我经历的令人痛苦的细节和挫折……缺乏睡眠和食物。

我尝试了很长时间来使数组入口点工作......但后来我在文档中的某处读到“如果你传递一个数组：所有模块都在启动时加载。最后一个被导出。” 这解释了很多......我总是以某种方式只得到一个班级......不管那意味着......为什么会这样？这对我来说完全没有意义......无论如何...... 但即便如此，我得到的类也不是形式 library.class() 或 window.class() 或 class()。

所以过了一会儿，让我们在 index.js 中加载所有内容并导出它！

我首先尝试 ES6 导入样式，因为为什么不呢。但是import {One} from './src/class1' 不能以某种方式工作，只是在未定义的导出上产生一堆......就像 window.library.One = undefined。

所以我又摆弄了一会儿，然后才决定使用这个 index.js：

index.js

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


export { class1, class2, class3 }

我的 webpack 配置发生了很大变化，但这是我现在使用的：

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)/,
      },
    ],
  },
}

很多细节和尝试/错误都经过了痛苦的尝试……我确实写了我的实验日志……也许我会在几个小时内扣动扳机之前与全世界分享它。

无论如何，它有点工作，但不如预期的那样，而且绝对不是生产质量。要访问该类，我必须使用“new libraryName.One.One()”。如果我想为 npm 捆绑它，这对用户来说毫无意义。它仍然无法按预期工作。

这是页面上对象的截图：

我希望有人能来帮助我。我的生活真的可能取决于它:)

谢谢！

编辑并结束

所以 cbll 回答确实有效...我可以使用 es6 import 语句，并且类已正确导出到包中。 在 html 中我可以使用

libraryName.class()

如果有人和我处于同样的困境，我创建了一个小型仓库：

https://github.com/albertbuchard/example-webpack-es6-class-bundle

再次感谢 cbll 和 Michael Jungo！

Answer 1

在每个classN.js 中，通过export default One 在文件末尾或开头导出每个类（就像您在“One”示例中所做的那样，而不是其他示例）。在您的index.js 中，通过以下方式导入每个：import One from './classN.js'，当然假设它们在同一个文件夹中（如果没有，请添加正确的路径）。然后它将包含在您的主 index.js 中，并与 Webpack 捆绑在一起。

在你的情况下，这意味着你的 index.js 会像这样开始：

import One from ('./src/class1.js')
import Two from ('./src/class2.js')
import Three from ('./src/class3.js')

这是假设您在示例中导出所有类，例如 One，所以：

export default class One { // code goes here

export default class Two { // code goes here

export default class Three { // code goes here

Answer 2

你已经差不多了，但看起来你对 import/export 语法有点困惑。

首先，您以不同的方式导出类。在./src/class1.js 中，您使用默认导出：export default class One {，但在另外两个中，您使用命名导出export { 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>