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

【问题标题】：Unable to import soap-npm module with webpack 4 and babel 7无法使用 webpack 4 和 babel 7 导入 soap-npm 模块
【发布时间】：2019-10-30 08:30:30
【问题描述】：

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

我需要在浏览器中使用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'),
        ],
      },
   },
}

【问题讨论】：

标签： javascript webpack soap babeljs

【解决方案1】：

可能正在发生的事情是node-soap 没有默认导出（请参阅soap.js）并且您没有导入任何其命名的导出，因此它们在编译过程中被 webpack 的tree shaking 删除，而您得到的只是是一个空块（你可以通过检查 webpack 生成的包来确认这一点）。

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

import { createClient } from 'soap'

【讨论】：

谢谢@sdgluck！有用。我只有在更新了 webpack 和 babel 7 之后才遇到这个问题。在我之前的代码中，使用vue-cli，我通常导入import soap from 'soap' 没有任何问题。你知道可能是什么原因吗？无论如何，感谢您在答案中提供的链接，它们对我理解问题有很大帮助。
不客气 :-) 你是从哪个版本的 Babel 升级而来的？
我在@vue/cli-plugin-babel v3.7.0 中使用了babel。看来"babel-core": "7.0.0-bridge.0"。但老实说……我还不太了解 webpack 和 babel 的实现，vue-cli 为我完成了这项工作。我需要更多地研究它。 ;-)

【解决方案2】：

要使用监听（服务器），这对我有用：

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

【讨论】：