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

Posted 2023-03-08

技术标签:

【中文标题】使用 webpack 将多个 ES6 类捆绑到一个文件中，以便在脚本标签中导入【英文标题】：Use webpack to bundle several ES6 classes into one file for import in a script tag 【发布时间】：2017-07-31 21:18:59 【问题描述】：

现在已经三天了，我试图理解 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！

【问题讨论】：

有什么理由你不能在每个文件中将类定义为var，而只是在你的主js文件中做import Class1 from './class1'？我想你也可以以同样的方式导出类，但我不确定这是“正确的”ES6 语法。我不确定我现在是爱你还是恨你……但是是的。那是什么！我和我的理智都感谢你。为了您的帮助，您将永远在 GitHub 上。帅哥，乐于助人。我将其添加为答案，请接受:-) 【参考方案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

【讨论】：

轻微修正！有效的方法就像您在评论中提到的那样：定义 const One = class One() 然后导出 export One 。不适用于导出默认值。你必须选择一种方式并坚持下去。当您将 One 定义为默认时，您已经导出了它，而 Two 和 Three 在创建函数后导出的方式不同。是的，但这不起作用......如果你愿意，你可以检查回购。你的第一个见解是好的更新了答案。将您的班级创建更改为我写的内容，并以这种方式导入 - 它应该可以工作:-) 不客气。学习 Javascript 和 Webpack 可能会损害健康。:-)【参考方案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>

【讨论】：

以上是关于使用 webpack 将多个 ES6 类捆绑到一个文件中，以便在脚本标签中导入的主要内容，如果未能解决你的问题，请参考以下文章

Webpack：ES6 语法给出了 Module build failed: SyntaxError: Unexpected token

如何使用 React + ES6 + webpack 导入和导出组件？

如何使用 webpack 更新多个捆绑的 js 文件？

意外的令牌导入（webpack es6）

动态加载外部 webpack 捆绑的 ngModule 作为路由处理程序

如何使用 webpack 将 html、js 和 css 捆绑在一个 html 文件中？ [关闭]