从使用 module.exports 的文件导入 Webpack

Question

我有React应用程序和一个文件，我想在其中存储与api相关的东西。

const proxy = require('http-proxy-middleware');
const path = require('path');
//.....
const targetApi = (objectWithUrlEntries) => {
  Object.keys(objectWithUrlEntries).forEach((key) => {
    objectWithUrlEntries[key] = path.join('/api/', objectWithUrlEntries[key]);
  });
};
module.exports.proxyExpressCalls = proxyExpressCalls;
module.exports.devServerProxyConfig = devServerProxyConfig;
module.exports.targetApi = targetApi;

其中一些东西将由 webpack 本身使用，而另一些将在应用程序内部使用（以正确定位 api 调用）。

但是，当我尝试在我的应用程序中导入内容时：

// @flow
import { buildUrl } from 'data/utils';
import type { Axios } from './flow.types';
import { targetApi } from './api';
console.log(targetApi());

我收到错误。在终端中：

./src/data/redux/api/user中的警告.js 6：12-21 "export 'targetApi' 在"./API"中找不到

在浏览器中：

api.js?d669:39 Uncaught TypeError: Cannot set property 'proxyExpressCalls' of undefined
    at Object.eval (api.js?d669:39)
    at eval (api.js:60)
    at Object../src/data/redux/api/api.js (client.bundle.js:11620)
    at __webpack_require__ (client.bundle.js:708)
    at fn (client.bundle.js:113)
    at eval (user.js:15)
    at Object../src/data/redux/api/user.js (client.bundle.js:11668)
    at __webpack_require__ (client.bundle.js:708)
    at fn (client.bundle.js:113)
    at eval (user.js:18)

所以问题是，当应用程序被捆绑时commonjs导出失败，但如果我会使用 es6 export语法，那么Node就会失败。

Answer 1

我有一个类似的问题：我有一个javascript类，其中包含一些验证规则，我想在Node JS和客户端代码中使用。对我有用的是将所有内容转换为通用JS，共享代码，节点代码和客户端代码。但我仍然有一些问题。然后我"module": "commonjs"添加到导入共享代码的文件夹的 .babelrc 中，它终于起作用了。这是我的 .babelrc 文件：

{
    "presets": [
        "react",
        [
            "env",
            {
                "debug": true,
                "modules": "commonjs",
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ],
                }
            }
        ],
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-es2015-arrow-functions",
        "transform-class-properties"
    ]
}

另一种可能的解决方案是（未经测试！）使用 webpack 从您的共享代码中创建一个库。检查 output.library 和 output.libraryTarget 选项，查看哪些选项可以在不同的模块系统中公开库。然后在节点和客户端代码中导入共享库。

Answer 2

浏览器错误是关键：看起来 module.exports 为空。果然，您正在设置其值，但它未初始化。相反，如果您这样做：

  module.exports = {
    proxyExpressCalls: proxyExpressCalls,
    devServerProxyConfig: devServerProxyConfig,
    targetApi: targetApi
  };

（或者简单地先设置 module.exports = {}）这应该可以解决问题。控制台警告可能是代码的副作用，即使在无法对 null 变量设置值之后，代码也会继续存在。