Razzle: 迁移到打字稿

嘿，我也面临着让with-typescript示例与jsx文件一起工作以允许逐步迁移现有项目的困难。
有没有人知道如何存档这个目标？

弄清楚了！

npm i -D @babel/preset-typescript ts-loader typescript

将@babel/typescript到 .babelrc

"presets": [
    "razzle/babel",
    "@babel/typescript"
]

将此添加到 razle.config.js

config.resolve.extensions = config.resolve.extensions.concat(['.ts', '.tsx']);
config.module.rules.push({ test: /\.tsx?$/, loader: 'ts-loader' });

创建一个 tsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        // Target latest version of ECMAScript.
        "target": "esnext",
        // Search under node_modules for non-relative imports.
        "moduleResolution": "node",
        // Process & infer types from .js files.
        "allowJs": false,
        // Enable strictest settings like strictNullChecks & noImplicitAny.
        "strict": false,
        // Disallow features that require cross-file information for emit.
        "isolatedModules": true,
        // Import non-ES modules as default imports.
        "esModuleInterop": true,
        "jsx": "react"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules",
    ]
}

就是这样，现在您可以将扩展名重命名为 .ts 和 .tsx 以启用这些文件的打字稿。

如果你从未来来到这里，检出大球艺支持打字稿插件这里。