个人中心
gpt4 book ai didi

javascript - 如何从使用 webpack 构建的 VanillaJS 库中公开对象？

转载 作者：行者123 更新时间：2023-12-04 07:26:35 24 4
gpt4 key购买 nike

我正在开发一个 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 或其他现代工具导入
  • 正如您在问题
    • 中所述，全局范围污染了一个

    我正在试验的 repo 在这里:
    https://github.com/marcin-wosinek/webpack-sdk
    它是如何工作的一个例子在这里:
    https://marcin-wosinek.github.io/webpack-sdk/

    关于javascript - 如何从使用 webpack 构建的 VanillaJS 库中公开对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68182304/

    24 4 0
    文章推荐： flutter - 加载数据时如何等待或重建消费者
    文章推荐： java - 从一个创建多个列表(按特定字段对列表的对象进行分组)
    文章推荐： typescript - 使用@nomiclabs/hardhat-waffle 实现装置
    文章推荐： python - python socket编程期间http响应体中的奇怪数字
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com