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

Question

I'm developing a Vanilla JS library.我正在开发一个 Vanilla JS 库。 This library will have to expose an object, let's call it sdk : this object will contain all the library methods, so a potential user can do这个库必须公开一个对象，我们称之为sdk ：这个对象将包含所有库方法，因此潜在用户可以这样做

<script src="thelibrary.js"></script>
<script>
   sdk.myFunction();
</script>

This is my webpack configuration:这是我的 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,
          },
        }],
      },
    ],
  },
};

This is my index.js这是我的index.js

const myFunction = () => { 
   console.log('hello'); 
}
const sdk = { myFunction };

How can I achieve my objective?我怎样才能实现我的目标？

I have an index.html file that I'm serving via a python SimpleHTTPServer:我有一个通过 python SimpleHTTPServer 提供的index.html文件：

<body>
  <script src="http://localhost:5000/dist/my-sdk.js"></script>
</body>

But I'm not able to access the sdk object... what is my mistake?但我无法访问sdk对象......我的错误是什么？

Thanks a lot!非常感谢！

Answer 1

Short anwser - you are looking for:简短的回答- 您正在寻找：

output: {                                                                                                                                                                          
  library: {                                                                                                                                                                       
    type: "window",                                                                                                                                                                
  },                                                                                                                                                                               
},

with webpack.config.js containing that, my sdk object is available on window - as you stated in your question.使用包含它的webpack.config.js ，我的sdk对象在window上可用 - 正如您在问题中所述。

Long answer - that resembles a lot how js libraries were written many years ago.长答案- 这很像多年前编写 js 库的方式。 It still can be a valid use case now but can put away people from modern projects away from your library.它现在仍然可以是一个有效的用例，但可以将现代项目的人们从你的图书馆中带走。 I would aim for building at least 2 files:我的目标是构建至少 2 个文件：

standard output, to be imported via wepback or by another modern tool标准输出，通过 wepback 或其他现代工具导入
global scope polluting one, as you stated in your question正如您在问题中所述，全球范围污染了一个

The repo I was experimenting with is here: https://github.com/marcin-wosinek/webpack-sdk我正在试验的回购在这里： https : //github.com/marcin-wosinek/webpack-sdk

And an example of how it's working is here: https://marcin-wosinek.github.io/webpack-sdk/它是如何工作的一个例子在这里： https : //marcin-wosinek.github.io/webpack-sdk/

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-06-29 19:50:34

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-06-29 19:50:34

解决方案1
2 已采纳 2021-06-29 19:50:34