expose-to-window-plugin
v1.2.7
Published
插件实现原由:webpack打包出来的bundle.js里面的代码都包裹在一个IIFE函数(闭包)里面,导致外面环境无法访问里面的变量和函数。
Readme
这是一个 Webpack 插件,使得 入口模块列如index.js 和 所有其他模块中导出的变量和函数 都能被 自动暴露到 window 对象上。
插件实现原由:webpack打包出来的bundle.js里面的代码都包裹在一个IIFE函数(闭包)里面,导致外面环境无法访问里面的变量和函数。
✅ 实现目标
入口模块顶层定义的变量和函数绑定到window
Webpack 配置(webpack.config.js)
const path = require('path');
const ExposeToWindowPlugin = require('expose-to-window-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new ExposeToWindowPlugin({ entry: path.resolve(__dirname, 'src/index.js') }),
],
};使用示例:
1. src/index.js(入口模块)
const myVar = 42;
function myFn() {
console.log('Hello from myFn!');
}2.HTML 文件(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Webpack Global Example</title>
</head>
<body>
<script src="bundle.js"></script>
<script>
myFn(); // 来自入口模块
console.log(myVar); // 来自入口模块
</script>
</body>
</html>