javascript - 无法使用 webpack 4 和 babel 7 导入 soap-npm 模块

Question

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

我需要使用 node-soap库在我的浏览器中作为soap客户端，但是当运行webpack编译的代码时，这个库的值是undefined

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 的编译过程中被丢弃tree shaking你得到的只是一个空 block (你可以通过检查 webpack 生成的包来确认这一点)。

尝试将 node-soap 方法直接导入为命名导出，例如createClient :

import { createClient } from 'soap'