Webpack-Import von Dateien, die module.exports verwenden

Question

Ich habe React App und eine Datei, wo ich Dinge im Zusammenhang mit API speichern möchte.

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; 

Einige dieser Dinge wird sich durch webpack verwendet werden, und einige werden in der App verwendet werden (richtig api Anrufe Ziel).

aber wenn ich versuche, die Dinge in meiner App zu importieren:

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

console.log(targetApi()); 

ich Fehler bekommen. Im Terminal:

WARNUNG in ./src/data/redux/api/user.js 6: 12-21 „Export 'targetApi' wurde nicht in './api' gefunden

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) 

das Problem ist also, dass, wenn app commonjs Exporte nicht gebündelt werden, aber wenn ich es6 export Syntax verwenden würde scheitern Node würde dann

Answer 1

Ich hatte ein ähnliches Problem: Ich hatte eine JavaScript-Klasse mit einigen Validierungsregeln, die ich in Node JS und auch im Client-Code verwenden wollte. Was für mich funktionierte, bestand darin, alles in Common JS, den gemeinsamen Code, den Node-Code und den Client-Code umzuwandeln. Aber ich hatte immer noch Probleme. Dann fügte ich "module": "commonjs" zu meinem .babelrc des Ordners hinzu, der den geteilten Code importiert und es schließlich funktionierte. Das ist meine .babelrc-Datei: (! Nicht getestet)

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

Weitere mögliche Lösungen wird eine Bibliothek aus Ihrem gemeinsamen Code zu erstellen, mit webpack. Überprüfen Sie die Optionen "output.library" und "output.libraryTarget", um festzustellen, welche Optionen für die Bereitstellung der Bibliothek in verschiedenen Modulsystemen erforderlich sind. Importieren Sie anschließend Ihre gemeinsam genutzte Bibliothek in Ihren Knoten- und Clientcode.