錯誤：無法解析JS isomorphic app中的'fs'

Question

我正在構建一個應該在前端和后端運行的Typescript包。 我正在使用此包來識別環境是瀏覽器還是節點： https ： //www.npmjs.com/package/browser-or-node入口點是單個index.js文件

我可以構建和發布應用程序沒有問題，但是當我導入它並嘗試在瀏覽器中運行它時我得到錯誤消息Module not found: Error: Can't resolve 'fs'

這似乎來自於我導入fs這是一個節點方法，瀏覽器不知道該怎么做。

在這種情況下，為避免此問題，最佳做法是什么？ 如果我不導入該模塊，那么庫工作正常。

我的package.json：

"license": "MIT",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "test": "mocha -r ts-node/register src/**/*.spec.ts"
  },
  "devDependencies": {
    "@types/chai": "^4.1.7",
    "@types/mocha": "^5.2.6",
    "@types/sinon": "^7.0.11",
    "@types/sinon-chai": "^3.2.2",
    "chai": "^4.2.0",
    "mocha": "^6.1.4",
    "sinon": "^7.3.2",
    "sinon-chai": "^3.3.0",
    "ts-node": "^8.1.0",
    "typescript": "^3.4.4"
  },
  "dependencies": {
    "@types/es6-promise": "^3.3.0",
    "axios": "^0.18.0",
    "browser-or-node": "^1.2.1",
    "dotenv": "^7.0.0"
  }

我的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "noImplicitAny": false,
    "lib": [ "es2015" ]
  },
  "exclude":[
    "node_modules",
    "./dist",
    "./**/*.spec.ts",
    "./test/**/*.ts"
  ]
}

導致問題的功能：

import * as fs from 'fs';

export function saveTokensNode(data: any, path: string) {
    try {
        fs.writeFileSync(path, JSON.stringify(data))
    } catch (err) {
        console.error(err)
    }
}

我在哪里使用它：

setCredentials(tokens) {
    if (isBrowser) {
        saveTokensStorage(tokens)
    }

    if (isNode) {
        saveTokensNode(tokens, 'temp/tokensToStore.json')
    }
}

Answer 1

基本答案是您可以使用“browser”package.json字段從瀏覽器包中排除模塊。 它得到了所有主要捆綁商的支持。

{
  "browser": {
    "fs": false
  }
}

然后，在browserify中，導入fs時將獲得一個空對象。 不過我不確定其他捆綁商會做什么！

---

但實際上你可以稍微改變一下，避免使用瀏覽器或節點包。 您可以為令牌存儲的節點和瀏覽器實現提供兩個文件。 例如，

// token-storage.js
import * as fs from "fs"
export function saveTokens() { /* Node implementation */ }

// token-storage.browser.js
export function saveTokens() { /* localStorage implementation */ }

您可以使用“瀏覽器”字段再次切換它們。

{
  "browser": {
    "./path/to/token-storage.js": "./path/to/token-storage.browser.js"
  }
}

然后，在您的模塊中，您可以執行以下操作：

import { saveTokens } from "./token-storage.js"
function setCredentials (tokens) {
  saveTokens(tokens, 'temp/tokensToStore.json')
}

瀏覽器實現可以忽略文件路徑，或將其用作localStorage密鑰名稱。 它使節點/瀏覽器決策本地化到令牌存儲文件，當您在其他地方使用它時，您不必考慮它。