Webpack import from files that use module.exports

问题

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;

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:

WARNING in ./src/data/redux/api/user.js 6:12-21 "export 'targetApi' was not found in './api'

in browser:

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)

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.

回答1:

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"
    ]
}

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.

来源：https://stackoverflow.com/questions/46767110/webpack-import-from-files-that-use-module-exports

标签

node.js

reactjs

Webpack

ecmascript-6

commonjs