如何從使用 webpack 構建的 VanillaJS 庫中公開對象？

Question

我正在開發一個 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 };

我怎樣才能實現我的目標？

我有一個通過 python SimpleHTTPServer 提供的index.html文件：

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

但我無法訪問sdk對象......我的錯誤是什么？

非常感謝！

Answer 1

簡短的回答- 您正在尋找：

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/

如何從使用 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