在瀏覽器中訪問webpack捆綁的庫

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您正在創建一個庫。

從webpack 文檔：

要使您的庫可以重用，請在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 個解決方案

解決方案1
21 已采納 2017-02-03 15:57:50

解決方案2
0 2017-02-02 22:37:39

解決方案3
0 2017-02-02 22:45:57

在瀏覽器中訪問webpack捆綁的庫

問題描述

3 個解決方案

解決方案1 21 已采納 2017-02-03 15:57:50

解決方案2 0 2017-02-02 22:37:39

解決方案3 0 2017-02-02 22:45:57

解決方案1
21 已采納 2017-02-03 15:57:50

解決方案2
0 2017-02-02 22:37:39

解決方案3
0 2017-02-02 22:45:57