为什么我不能使用webpack捆绑文件中的类？

Question

I'm extremely new to using webpack. 我是使用webpack的新手。 I'm trying to use it to bundle my framework. 我正在尝试使用它来捆绑我的框架。 Anyways my framework's file looks something like this: 无论如何我的框架的文件看起来像这样：

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

In my webpack.config.js: 在我的webpack.config.js中：

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

My package.json: 我的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"
  }
}

So i run: 所以我跑：

npm run bundle

And it outputs a bundle file. 它输出一个捆绑文件。 I then include that file like this: 然后我包括这样的文件：

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

And finally, this is my game.js: 最后，这是我的game.js：

const game = new Rorke(800, 600);

So when i open the html file, it tells me: 所以当我打开html文件时，它会告诉我：

Rorke is not defined Rorke没有定义

Does anyone know why this is the case? 有谁知道为什么会这样？ What am i doing wrong here/not understanding? 我在这里做错了什么/不理解？

Answer 1

您需要的一切都在Webpack文档中：创作库/暴露库

Answer 2

Developing a website really just means creating an HTML file, a CSS file, and a JavaScript file (or sometimes these are combined, or the CSS and JavaScript or combined, etc). 开发一个网站实际上只是意味着创建一个HTML文件，一个CSS文件和一个JavaScript文件（有时这些文件是组合在一起的，或者是CSS和JavaScript或组合等）。 These are just files served via a webserver on request. 这些只是根据请求通过网络服务器提供的文件。

I think one of the main reasons to use webpack is to follow require / import statements, that will convert client code spread across multiple files into a single bundle. 我认为使用webpack的一个主要原因是遵循require / import语句，这会将跨多个文件的客户端代码转换为单个包。 Frontend development tooling, such as webpack allows for authoring these files as separate components. 前端开发工具（例如webpack）允许将这些文件创作为单独的组件。

Rorke is probably scoped to the bundle. Rorke可能是捆绑的。 So start with an index.js file, require / import your class, and then use that class. 所以从index.js文件开始，需要/导入你的类，然后使用该类。 Then change your webpack root to be index.Js. 然后将您的webpack根目录更改为index.Js。

为什么我不能使用webpack捆绑文件中的类？

问题描述

2 个解决方案

解决方案1
0 2019-05-26 08:03:34

解决方案2
0 2019-05-26 12:18:53

为什么我不能使用webpack捆绑文件中的类？

问题描述

2 个解决方案

解决方案1 0 2019-05-26 08:03:34

解决方案2 0 2019-05-26 12:18:53

解决方案1
0 2019-05-26 08:03:34

解决方案2
0 2019-05-26 12:18:53