node.js - 在 typescript 中使用 fs

Question

我只是尝试使用 fs.readFileSync 读取文件，但似乎找不到。

我确保声明了它，并在我的构造函数中添加了它:

export default class Login extends React.Component<LoginProps, {}> {
    private webAuth: auth0.WebAuth;
    fs: any;

    constructor(props: any, context: any) {
        super(props, context);
        this.fs = require('fs');
        this.webAuth = new auth0.WebAuth({
            clientID: conf.auth0.clientId,
            domain: conf.auth0.domain,
            responseType: 'token id_token',
            redirectUri: `${window.location.origin}/login`
        });
    }
[...]

并在一个简单的函数中使用它:

verifyToken = (token) => {

    console.log(this.fs);
    let contents = this.fs.readFileSync('../utils/public.key', 'utf8');
    console.log(contents);

}

但这会引发 Uncaught TypeError: _this.fs.readFileSync is not a function。有没有一种特殊的方法可以在 Typescript 中包含 fs ？

Answer 1

我无法想象你会在 React 组件中使用 fs 的任何情况。即使您可以在服务器中使用 React 来渲染内容，但应该在客户端中运行相同的代码，您无法在客户端中访问 fs。

如果你想在服务器中使用fs，这是一个例子:

import * as fs from 'fs';
import * as path from 'path';
fs.readFile(path.join(__dirname, '../../client/index.html'), 'utf8', (error, data) => {
        // ...
    })

在你的 package.json 文件中，确保对 node 有依赖

"dependencies": {
 "@types/node": "^7.0.5"
}

这就是我的 tsconfig.json 文件的样子:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "typeRoots": [
            "./node_modules/@types"
        ]
    },
    "include": [
        "./db/**/*",
        "./src/**/*"
    ]
}