從使用module.exports的文件導入Webpack

我有React應用程序和一個文件，我想存儲與api相關的東西。從使用module.exports的文件導入Webpack

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本身使用，其中一些將被用於app內部（正確地定位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「出口 '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會失敗

來源

2017-10-16 Tomasz

我有一個類似的問題：我有一個JavaScript類，有一些驗證規則，我想在Node JS和客戶端代碼中使用。對我而言，所有工作都轉換爲Common JS，共享代碼，節點代碼和客戶端代碼。但我仍然有一些問題。然後，我將"module": "commonjs"添加到導入共享代碼的文件夾的我的.babelrc文件中，並最終生效。這是我的.babelrc文件：（！未測試）

{ 
    "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選項以查看您必須在不同模塊系統中公開庫的選項。然後在節點和客戶端代碼中導入共享庫。

來源

2018-02-06 17:20:09

從使用module.exports的文件導入Webpack

回答

相關問題