Question

我无法从浏览器访问webpack捆绑库。

示例：我有一个班级Foo

// foo.js

"use strict";

export default class Foo {
  constructor() {
    var bar = "bar";
  }
}

Foo已在src.js

中导入

// src.js

"use strict";
import Foo from "./foo.js";

webpack配置如下所示。条目为src.js，输出文件为bundle.js。

// webpack.config.js

module.exports = {
  entry: './src.js',
  output: {
    path: '.',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
    ]
  },
};

Webpack编译好的一切，我可以将它加载到我的HTML文件中。

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <script src="bundle.js"></script>
  <script type="text/javascript">
    var x = new Foo();
    console.log(x);
  </script>
</head>
<body>
</body>
</html>

正是在这一点上我得到了错误。出于某种原因，捆绑的JS不会将Foo类放入浏览器能够访问的命名空间中。

这是我在Firefox中遇到的错误：

ReferenceError: Foo is not defined[Learn More]

WebPack中有一些配置我不是很喜欢，我很确定，但到目前为止我还没弄清楚。

Answer 1

要使此代码可重用，您需要告诉webpack您正在创作一个库。

来自网络包[{3}}：

要使您的库可以重用，请在webpack配置中添加库属性。

要创建库，请进行以下更改：

module.exports = {
  entry: './src.js',
  output: {
    path: '.',
    filename: 'bundle.js',
    library: 'fooLibrary', //add this line to enable re-use
  },
...

为了使用该库，您可以在其他脚本中引用它：

<script type="text/javascript">
  var x = new fooLibrary.Foo();
  console.log(x);
</script>

Answer 2

Webpack和ES2015模块的一个主要优点是它默认会停止污染全局命名空间。

因此，如果要在全局对象上发布内容，则必须明确地执行此操作。我建议将您的类命名为应用程序或公司的独特内容，这样您就不会冒任何其他任何命名冲突的风险。

Answer 3

看起来'var'是output.libraryTarget的默认值，因此您应该能够定义output.library属性，并且您将能够全局访问var。 https://webpack.js.org/configuration/output/#output-librarytarget

在浏览器中访问webpack捆绑的库

3 个答案: