Webpack从使用module.exports的文件导入 [英] Webpack import from files that use module.exports

问题描述

我有React应用和一个文件，我想在其中存储与api相关的内容.

I have React app and a file where I want to store things related to 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调用).

Some of those things will be used by webpack itself, and some will be used inside the app (to correctly target api calls).

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

However when I try to import things in my app:

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

console.log(targetApi());

我遇到错误.在终端中:

I get errors. In terminal:

./src/data/redux/api/user.js中的警告6:12-21导出'targetApi'在"./api"中找不到

WARNING in ./src/data/redux/api/user.js 6:12-21 "export 'targetApi' was not found in './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 将会失败

So the problem is that when app is being bundled commonjs exports fail, but if I would use es6 export syntax then Node would fail.

推荐答案

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

I had a similar problem: I had a javascript class with some validation rules that I wanted to use in Node JS and also in the client code. What worked for me was converting everything to Common JS, the shared code, the node code, and the client code. But I still had some problems. Then I added "module": "commonjs" to my .babelrc of the folder that imports the shared code and it finally worked. This is my .babelrc file:

{
    "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选项，以查看在不同模块系统中必须公开哪些库.然后，将共享库导入节点和客户端代码中.

Another possible solutions is (not tested!) to create a library out of your shared code, using webpack. Check the output.library and output.libraryTarget options to see which options you have to expose the library in different module systems. Then import your shared library in your node and client code.

这篇关于Webpack从使用module.exports的文件导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！