javascriptからtypescriptへのcreate-react-appの移行

Question

私は数ヶ月前にcreate-react-appを使って反応プロジェクトを開始しました。私はJavascriptからTypescriptにプロジェクトを移行するのに面白いです。

私はフラグを使用してtypescriptですとアプリを反応させる作成する方法があることを見た：

--scripts-version=react-scripts-ts 

しかし、私はTSに既存のJSプロジェクトを移行することができますどのように任意の説明を見つけることができませんでした。 私は両方の.jsファイルと.tsファイルで作業できるように、段階的に行う必要があるため、時間の経過とともに変換を行うことができます。 誰もこの移行に関する経験はありますか？この仕事をするために必要なステップは何ですか？

Answer 1

、このようはイジェクトを必要としません。

1. 一時的に（注意 - グローバルにインストールすることがcreate-react-appが必要です）コマンドにcreate-react-app --scripts-version=react-scripts-ts を実行することにより、typescriptですとプロジェクトを反応作成し、独自のプロジェクトで
2. からpackage.jsonファイルの下react-scripts
3. あなたにreact-scripts-tsを追加を削除プロジェクトyarn add react-scripts-tsを実行するか、またはnpmを使用している場合はnpm install react-scripts-tsと入力します。または、"react-scripts-ts": "2.8.0"をpackage.jsonに追加します。あなた自身のプロジェクトの下では、独自のプロジェクトにtsconfig.json, tsconfig.test.json tslint.json
4. 、package.jsonで、スクリプトのセクションの下で、react-scripts-tsにreact-scriptsインスタンスを変更する（startの下でなければなりません、build、testと：手順1コピーでファイルを作成したプロジェクトから
5. eject
6. ヤーンまたはNPM使用して、以下のモジュールをインストールすることにより、反応のためのタイピングを取り付けます。@types/node、@types/reactと@types/react-domをpackage.jsonを使用する場合devDependenciesセクションに置きます。
7. ファイル名をindex.tsx
8. に変更します。index.tsxで非相対インポートを修正しました。例えば。 import React〜import * as Reactに変更してください。詳細情報here。追加の修正が必要な場合があります

NOTEステップ7は、（それがプロジェクトにJSモジュールに依存している場合）、あなたのindex.jsファイルに持っているものに依存します。

これでプロジェクトを実行することができます。エラーが発生している.jsファイルに関してはYou may need an appropriate loader to handle this file typeが含まれています.babelは.tsxファイルから.jsファイルをロードする方法がわからないために発生します。私たちがする必要があるのは、プロジェクトの構成を変更することです。私はそれを実行しないで見つけた方法ejectはreact-app-rewiredパッケージを使用しています。このパッケージを使用すると、デフォルトのプロジェクト設定を追加/上書きする外部設定を構成できます。ここでは、これらのタイプのファイルを読み込むためにbabelを使用します。のは、上に移動してみましょう：

1. ルートフォルダで糸を使用してパッケージreact-app-rewiredまたはNPM
2. をインストールします（package.jsonが置かれている場所）の名前でconfig-overrides.js

3. を新しいファイルを作成config-overridesファイルにこのコードを入れてください：

   var paths = require('react-scripts-ts/config/paths') 
   
   module.exports = function override(config) { 
       config.module.rules.push({ 
       test: /\.(js|jsx)$/, 
       include: paths.appSrc, 
       loader: require.resolve('babel-loader'), 
       options: { 
        babelrc: false, 
        presets: [require.resolve('babel-preset-react-app')], 
        cacheDirectory: true, 
       }, 
       }) 
   
       return config 
   } 
   

編集package.jsonのでstart/start-js 、build、test、およびejectスクリプトは、project readmeに示すようにreact-app-rewiredを使用します。例えば。 "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"。

これでプロジェクトを始めることができ、問題を解決する必要があります。あなたのプロジェクト（追加のタイプなど）に応じて追加の変更が必要な場合があります。

はそれが答えを

Answer 2

これを行うには、設定を取り出す必要があります。

吐出後、次の手順を実行する必要があります。

1. はWebPACKのののconfigs（DEV及びPROD）にextensionsテーブル にtypescriptです拡張tsxとtsを追加します。

2. ts-loaderを追加します。ここでは活字ファイルをデバッグする可能性を得るために、ソース・マップ・ローダーを追加

3. をtslintする例

   { 
       test: /\.(ts|tsx)$/, 
       include: paths.appSrc, 
       use: [ 
       { 
        loader: require.resolve('ts-loader'), 
       }, 
       ], 
   }, 
   

4. 変更eslintです。

   { 
       test: /\.js$/, 
       loader: require.resolve('source-map-loader'), 
       enforce: 'pre', 
       include: paths.appSrc, 
   } 
   

5. 活字体のconfigファイルを作成し、真の にallowJsを設定することを忘れないでください。私は活字するJavaScriptから作成反応するアプリを移行するためのソリューションを見つけ