Razzle: Typescriptへの移行

作成日 2019年04月14日  ·  3コメント  ·  ソース: jaredpalmer/razzle

大規模なプロジェクトがあり、一度に1つのコンポーネントでTypescriptへの移行を開始したいと考えています。

--with-typescriptを試しましたが、すべてのファイルの名前を一度に変更する必要があります。 新しいファイルがtypescriptファイル拡張子を採用している間、変換されていないファイルが最初の拡張子を保持するようにゆっくりと変換したいと思います。

どうすればこれをラズルで行うことができますか?

最も参考になるコメント

理解した!

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

@babel/typescriptを.babelrcに追加します

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

これをrazzle.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に変更して、これらのファイルのタイプスクリプトを有効にできます。

全てのコメント3件

また、 with-typescript例をjsxファイルで機能させて、既存のプロジェクトを段階的に移行できるようにするのにも苦労しています。
誰かがこの目標をアーカイブする方法のアイデアを持っていますか?

理解した!

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

@babel/typescriptを.babelrcに追加します

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

これをrazzle.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に変更して、これらのファイルのタイプスクリプトを有効にできます。

将来ここに来る場合は、razzleでサポートされている素晴らしいtypescriptプラグインをここでチェックして

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

dizzyn picture dizzyn  ·  3コメント

Ronny25 picture Ronny25  ·  5コメント

charlie632 picture charlie632  ·  4コメント

mhuggins picture mhuggins  ·  3コメント

pseudo-su picture pseudo-su  ·  3コメント