Question

因此，我使用以下入门项目https://github.com/a-tarasyuk/webpack-typescript-babel创建了一个JavaScript库，该项目使用了webpack，打字稿和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：未定义值

<!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 个答案: