Import Webpack à partir de fichiers utilisant module.exports

Question

J'ai une application React et un fichier dans lequel je veux stocker des choses liées à 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; 

Certaines de ces choses seront utilisées par webpack lui-même, et certains seront utilisés à l'intérieur de l'application (pour cibler correctement les appels api).

Cependant lorsque je tente d'importer des choses dans mon application:

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

console.log(targetApi()); 

Je reçois des erreurs. Dans le terminal:

AVERTISSEMENT dans ./src/data/redux/api/user.js 6: 12-21 « export 'targetApi' n'a pas été trouvé dans './api'

dans le navigateur.

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) 

le problème est que lorsque l'application est empaqueté commonjs exportations échouent, mais si j'utiliser la syntaxe ES6 exportNode serait alors l'échec

Answer 1

J'ai eu un problème similaire: j'avais une classe javascript avec quelques règles de validation que je voulais utiliser dans Node JS et aussi dans le code client. Ce qui fonctionnait pour moi consistait à tout convertir en Common JS, le code partagé, le code de nœud et le code client. Mais j'avais encore quelques problèmes. Puis j'ai ajouté "module": "commonjs" à mon .babelrc du dossier qui importe le code partagé et cela a finalement fonctionné. Ceci est mon fichier .babelrc: (non testé)

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

Une autre solution possible est de créer une bibliothèque de votre code partagé, en utilisant webpack. Vérifiez les options output.library et output.libraryTarget pour voir quelles options vous avez pour exposer la bibliothèque dans différents systèmes de modules. Importez ensuite votre bibliothèque partagée dans votre noeud et votre code client.