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

Question

所以我使用以下启动项目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 类？ 我尝试了以下但它抛出一个未捕获的 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>

谢谢

Answer 1

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

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

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

更新：

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-12 12:33:52

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-12 12:33:52

解决方案1
1 已采纳 2019-04-12 12:33:52