Javascript 为什么可以'；我不能使用Web包捆绑文件中的类吗？_Javascript_Webpack

Javascript 为什么可以'；我不能使用Web包捆绑文件中的类吗？

javascript webpack

Javascript 为什么可以'；我不能使用Web包捆绑文件中的类吗？,javascript,webpack,Javascript,Webpack,我对使用webpack非常陌生。我正试图用它来捆绑我的框架。无论如何，我的框架文件看起来像这样： class Rorke { constructor(x, y) { this.x = x; this.y = y; } } <html> <body> <script src="dist/rorke.bundle.js"></script> <script src="game.

我对使用webpack非常陌生。我正试图用它来捆绑我的框架。无论如何，我的框架文件看起来像这样：

class Rorke {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

<html>
  <body>
    <script src="dist/rorke.bundle.js"></script>
    <script src="game.js"></script>
  </body>
</html>

在我的webpack.config.js中：

module.exports = {
  entry: "./src/rorke.js",
  output: {
    filename: "rorke.bundle.js"
  }
}

My package.json：

{
  "name": "rorke-3.0",
  "version": "1.0.0",
  "description": "",
  "main": "./src/rorke.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack ./src/rorke.js dist/rorke.bundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.32.2"
  },
  "dependencies": {
    "pixi.js": "^5.0.3",
    "prototype": "0.0.5"
  }
}

所以我跑：

npm run bundle

并输出一个bundle文件。然后，我将该文件包括如下内容：

class Rorke {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

<html>
  <body>
    <script src="dist/rorke.bundle.js"></script>
    <script src="game.js"></script>
  </body>
</html>

因此，当我打开html文件时，它会告诉我：

未定义Rorke

有人知道为什么会这样吗？我在这里做错了什么/不理解？

你需要的一切都在网页文档中：

开发一个网站实际上只意味着创建一个HTML文件、一个CSS文件和一个JavaScript文件（或者有时它们是组合的，或者CSS和JavaScript或组合的，等等）。这些只是根据请求通过Web服务器提供的文件

我认为使用webpack的一个主要原因是遵循require/import语句，这将把分布在多个文件中的客户机代码转换为单个包。前端开发工具（如webpack）允许将这些文件作为单独的组件进行创作

Rorke

的范围可能是捆绑包。因此，从index.js文件开始，需要/导入您的类，然后使用该类。然后将您的网页包根目录更改为index.Js。

Rorke的作用域可能是捆绑包。我认为使用webpack的一个主要原因是遵循require/import语句，这将把分布在多个文件中的客户机代码转换为单个包。因此，从index.js文件开始，需要/导入您的类，然后使用该类。然后将您的webpack root更改为index.js这是否意味着webpack配置的条目将为index.js？这是否意味着我需要导出Rorke类以使用导入？是的。您可以将

game.js

的名称更改为

index.js

，然后需要

index.js

顶部的

Rorke

类。这意味着您必须通过commonjs或ESM格式导出

Rorke

类