無法使用 webpack 4 和 babel 7 導入soap-npm 模塊

Question

我在舊的Framework7 (v4.4.3) / Vue.js (v2.6.10)項目中更新了Webpack (v4.34.0)和Babel (v7.4.5) 。

我需要在瀏覽器中使用node-soap庫作為soap客戶端，但是當運行由webpack編譯的代碼時，這個庫的值是未定義的

import soap from 'soap'
console.log('Soap Library Imported: ', soap)
Soap Library Imported: undefined

使用axios庫一切正常。

import axios from 'axios'
console.log('Axios Library Imported: ', axios)
Axios Library Imported: ƒ wrap() {...}

我想我在使用babel遇到了模塊導入問題，但我正在弄清楚問題出在哪里。

謝謝您幫忙。

---

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "modules": "auto",
      "targets": {
        "browsers": [
          "Android >= 5",
          "IOS >= 9.3",
          "Edge >= 15",
          "Safari >= 9.1",
          "Chrome >= 49",
          "Firefox >= 31",
          "Samsung >= 5",
        ],
      },
    }],
  ],
  "plugins": [
    "transform-vue-jsx",
    // "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
  ],
}

webpack.config.js （提取）

module.exports = {
  mode: env,
  node: {
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty', 
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        include: [
          resolvePath('src'),
          resolvePath('node_modules/framework7'),
          resolvePath('node_modules/framework7-vue'),
          resolvePath('node_modules/template7'),
          resolvePath('node_modules/dom7'),
          resolvePath('node_modules/ssr-window'),
          resolvePath('node_modules/soap'),
        ],
      },
   },
}

Answer 1

可能正在發生的事情是node-soap沒有默認導出（請參閱soap.js ）並且您沒有導入任何命名導出，因此它們在編譯過程中被 webpack 的樹搖動丟棄，您得到的只是一個空塊（您可以通過檢查 webpack 生成的包來確認這一點）。

嘗試將node-soap方法直接作為命名導出導入，例如createClient ：

import { createClient } from 'soap'

Answer 2

要使用監聽（服務器），這對我有用

import * as soap from 'soap'; soap.listen(...);

Answer 3

同樣的問題出現在 SvelteKit 和 Vite 很遺憾 node-soap GitHub 鎖定和禁用了問題。