如何在一个简单的html页面中使用webpack生成的js库
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在一个简单的html页面中使用webpack生成的js库相关的知识，希望对你有一定的参考价值。
所以我使用以下初学者项目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文件
当我在一个简单的html中删除index.js。如何在项目中使用Value类？我尝试了以下但它抛出了一个未捕获的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>
谢谢
答案
我找到了一个解决方案，但我不确定这是否是预期的行为。当我检查窗口对象时，以下代码有效
<script>
var p = new window.mylib.Value();
p.setValue(1000);
console.log(p.getValue());
</script>
所以我猜想webpack在浏览器中运行时会将库添加到窗口对象中？
更新：
我认为这是因为globalObject设置为'this'，它将在浏览器中将库挂载到窗口。
以上是关于如何在一个简单的html页面中使用webpack生成的js库的主要内容，如果未能解决你的问题，请参考以下文章
如何在 webpack 中加载 Pug 模板而不编译为 HTML？