3

我正在使用webpack和two.js编写一个 Web 应用程序。为了完整起见，这些是我的依赖项：

"devDependencies": {
  "jasmine-core": "^2.8.0",
  "karma": "^1.7.0",
  "karma-chrome-launcher": "^2.2.0",
  "karma-jasmine": "^1.1.0",
  "karma-webpack": "^2.0.4",
  "webpack": "^3.5.5"
},
"dependencies": {
  "two.js": "^0.6.0"
}

我有以下内容webpack.config.js：

const path = require('path');
module.exports = {
    entry: './myentry.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'out')
    }
};

入口文件myentry.js只导入two.js：

import * as two from "two.js";

捆绑成功...

库two.js是我的 npm 依赖项的一部分，因此可以在node_modules文件夹中的本地节点模块中找到它。当我继续创建捆绑包时：

webpack --config webpack.config.js

它成功了，我得到以下输出：

Hash: 5e762def59fa65ff8487
Version: webpack 3.5.5
Time: 468ms
               Asset    Size  Chunks                    Chunk Names
bundle.js  258 kB       0  [emitted]  [big]  main
   [0] ./myentry.js 271 bytes {0} [built]
    + 1 hidden module

生成的捆绑包可在此处获得。

但是......运行失败：

所以我在我的 HTML 页面中使用了这个包：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My stuff</title>
    <script type="module" src="./out/bundle.js"></script>
</head>
<body></body>
</html>

当我在 Chrome 中打开页面时（我使用http-server来避免与 CORS 相关的问题），我在 F12 Tools 中收到这些错误：

bundle.js:1674 Uncaught TypeError: Cannot read property 'Backbone' of undefined
    at bundle.js:1674
    at Object.<anonymous> (bundle.js:1831)
    at __webpack_require__ (bundle.js:20)
    at Object.root (bundle.js:72)
    at __webpack_require__ (bundle.js:20)
    at Object.defineProperty.value (bundle.js:63)
    at bundle.js:66

怎么了？

4

1 回答 1

0

看起来问题是我在 HTML 中引用包的方式：

<script type="module" src="./out/bundle.js"></script>

这是不正确的，因为生成的包不是 ES6 模块:(

<script type="application/javascript" src="./out/bundle.js"></script>

这使错误消失。它实际上会引发其他错误，但它们与骨干完全无关。

于 2017-08-27T07:48:36.573 回答