Question

我有React app和一个文件，我想存储与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和客户端代码中使用的验证规则。对我有用的是将所有内容转换为Common JS，共享代码，节点代码和客户端代码。但我还是遇到了一些问题。然后我将<div class="form-component"></div> <div class="form-component"></div> <div class="form-component"></div> <div class="form-component"></div>添加到导入共享代码的文件夹的.babelrc中，它最终起作用。这是我的.babelrc文件：

"module": "commonjs"

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

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

1 个答案: