如何在一个简单的html页面中使用webpack生成的js库答案

【问题标题】：How to use js library generated with webpack in a simple html page如何在一个简单的html页面中使用webpack生成的js库
【发布时间】：2019-04-12 12:19:45
【问题描述】：

所以我使用以下启动项目https://github.com/a-tarasyuk/webpack-typescript-babel 创建了一个javascript 库，它使用了webpack、typescript 和babel。

我更改了 webpack 配置以使用 UMD 生成一个库，以便我可以在浏览器和服务器中使用该库。

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src'),

  output: {
    filename: 'index.js',

    path: path.resolve(__dirname, 'lib'),

    library: 'mylib',
    libraryTarget: 'umd',
    globalObject: `(typeof self !== 'undefined' ? self : this)`,
    umdNamedDefine: true,
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [{ test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ }],
  },

  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    new CleanWebpackPlugin()
  ]
};

然后当我构建库时，我在 lib 目录中有 index.js 文件

当我将 index.js 放到一个简单的 html 中时。如何在项目中使用 Value 类？我尝试了以下方法，但它抛出了 Uncaught ReferenceError: Value is not defined

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="index.js">
    </script>

    <script>
      var val = new Value();
    </script>
  </body>
</html>

谢谢

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

我找到了解决方案，但我不确定这是否是预期的行为。当我检查窗口对象时，以下代码有效

    <script>
      var p = new window.mylib.Value();
      p.setValue(1000);
      console.log(p.getValue());
    </script>

所以我猜 webpack 在浏览器中运行时会将库添加到窗口对象中？

更新：

我认为这是因为 globalObject 设置为“this”，这将在浏览器中将库安装到窗口。

【讨论】：