我正在开发一个 Vanilla JS 库。该库必须公开一个对象，我们称之为 sdk:该对象将包含所有库方法，因此潜在用户可以执行此操作
<script src="thelibrary.js"></script>
<script>
sdk.myFunction();
</script>
这是我的 webpack 配置:
const path = require('path');
module.exports = {
entry:
['babel-polyfill', './src/index.js'],
output: {
path: path.join(__dirname, './dist'),
filename: 'my-sdk.js',
library: 'my-sdk-function',
libraryTarget: 'umd',
publicPath: '/dist/',
umdNamedDefine: true,
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'es2015', 'stage-0'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', {
loader: 'less-loader',
options: {
javascriptEnabled: true,
},
}],
},
],
},
};
这是我的index.js
const myFunction = () => {
console.log('hello');
}
const sdk = { myFunction };
我怎样才能实现我的目标？
我有一个 index.html 文件，我通过 python SimpleHTTPServer 提供服务:
<body>
<script src="http://localhost:5000/dist/my-sdk.js"></script>
</body>
但是我无法访问 sdk 对象...我的错误是什么？
非常感谢!
最佳答案
简短回答 - 您正在寻找:
output: {
library: {
type: "window",
},
},
随着 webpack.config.js 包含该内容，我的 sdk 对象可在 window 上使用 - 正如您在问题中所述。
长答案 - 这与多年前编写 js 库的方式非常相似。它现在仍然可以是一个有效的用例，但可以使现代项目中的人员远离您的图书馆。我的目标是构建至少 2 个文件:
- 标准输出，通过 wepback 或其他现代工具导入
- 正如您在问题中所述，全局范围内的污染
我正在尝试的存储库在这里: https://github.com/marcin-wosinek/webpack-sdk
其工作原理的示例如下: https://marcin-wosinek.github.io/webpack-sdk/
关于javascript - 如何从使用 webpack 构建的 VanillaJS 库公开对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68182304/