Javascript 在浏览器中访问网页包绑定库_Javascript_Webpack_Babeljs

Javascript 在浏览器中访问网页包绑定库

javascript webpack

Javascript 在浏览器中访问网页包绑定库,javascript,webpack,babeljs,Javascript,Webpack,Babeljs,从浏览器访问Web包捆绑库时遇到问题示例：我有一个类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"; 网页包配置如下所示。条目是src.js，输出文件是bundle.js // webpack.config

从浏览器访问Web包捆绑库时遇到问题

示例：我有一个类

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";

网页包配置如下所示。条目是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>


var x=新的Foo（）；
控制台日志（x）；

在这一点上，我得到了错误。出于某种原因，捆绑的JS没有将Foo
类放入浏览器能够访问的命名空间中
这是我在Firefox中遇到的错误：
ReferenceError:Foo未定义[了解更多信息]

WebPack中有一些配置我不太清楚，我很确定，但到目前为止我还没有弄清楚。
WebPack和ES2015模块的一个主要优点是默认情况下不再污染全局名称空间
因此，如果要在全局对象上发布某些内容，则必须显式执行。我建议将您的类命名为应用程序或公司特有的名称，因此，您不必冒命名冲突的风险。
看起来“var”是输出的默认值。libraryTarget
因此，您应该能够定义输出.library
属性，并且您将能够全局访问var
 要使此代码可重用，您需要告诉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>


var x=新的傻瓜库.Foo（）；
控制台日志（x）；
这是出于设计。@Claies是出于设计，我无法访问要包含在捆绑包中的类吗？那么webpack的意义是什么呢？它是通过设计将对象的范围限定到导入它们的模块，特别是在使用严格模式时。src.js
中的导入与HTML中的脚本不在同一范围内，因为该脚本1）未处于严格模式，2）绑定到全局名称空间。好的，但我在文档、博客帖子或下面的答案中没有看到解释如何获取我正在编写的代码的内容。我需要找到Foo（），但没人解释怎么做。只是我做错了。如果在src.js
中编写使用该导入的代码，它将正常工作，并且不会出现任何ReferenceError
。但是，浏览器本身不支持类；通过babel添加支持。但是，babel不会传输您的
标记。如果您想在
标记中使用该类，那么将其导出到全局命名空间是您唯一的选择。这不是WebPack天生就“完成”的事情，而且通常也不是很好的编程实践。我不想污染名称空间——这就是我创建类的原因——我只是想弄清楚如何访问该类。我在文档中找不到任何关于如何执行此操作的信息。为了使用库，您必须在生产环境中构建它，请停止开发服务器并按ctrl+C，然后输入webpack-p（为生产环境构建）