javascript - property - title label html

Migración de la aplicación crear-reaccionar de javascript a mecanografiado

Question

Comencé un proyecto de reacción utilizando la aplicación crear-reaccionar hace unos meses y estoy interesado en migrar el proyecto de Javascript a Typescript.

Vi que hay una manera de crear una aplicación de reacción con escritura de tipo usando la bandera:

--scripts-version=react-scripts-ts

Pero no encontré ninguna explicación de cómo puedo migrar un proyecto JS existente a TS. Necesito que se haga de manera incremental para poder trabajar con los archivos .js y .ts y poder realizar la transformación a lo largo del tiempo. ¿Alguien tiene alguna experiencia con esta migración? ¿Cuáles son los pasos necesarios que deben realizarse para que esto funcione?

Answer 1

Encontré una solución para migrar create-react-app de javascript a mecanografía, de esta forma no es necesario expulsar.

1. Cree un proyecto de reacción temporal con mecanografiado ejecutando el comando create-react-app --scripts-version=react-scripts-ts (Nota: requiere que la aplicación create-react-app esté instalada globalmente)
2. En su propio proyecto, en el archivo package.json , elimine los react-scripts
3. Agregue react-scripts-ts a su proyecto ejecutando el comando yarn add react-scripts-ts o si está usando npm, entonces npm install react-scripts-ts . O agregue "react-scripts-ts": "2.8.0" a package.json.
4. Desde el proyecto que creó en el paso 1, copie los archivos: tsconfig.json, tsconfig.test.json tslint.json en su propio proyecto
5. Bajo su propio proyecto, en package.json , en la sección de scripts, cambie react-scripts instancias de react-scripts-ts a react-scripts-ts (debe estar bajo start , build , test y eject
6. Instale los tipos para reaccionar instalando los siguientes módulos usando yarn o npm: @types/node , @types/react y @types/react-dom . Ponga en la sección devDependencies si usa package.json.
7. Cambiar el nombre del archivo index.js a index.tsx
8. En su archivo tsconfig.json agregue la siguiente configuración: "allowSyntheticDefaultImports": true - para más información

NOTA: el paso 7 puede requerir una modificación adicional dependiendo de lo que tenga en su archivo index.js (si depende de los módulos JS en el proyecto).

Ahora puede ejecutar su proyecto y podría funcionar, para aquellos de ustedes que reciben un error que contiene You may need an appropriate loader to handle this file type respecto a los archivos .js, esto sucede porque Babel no sabe cómo cargar .js archivo de archivos .tsx. Lo que tenemos que hacer es cambiar la configuración del proyecto. La forma en que lo encontré haciéndolo sin ejecutar eject es usando el paquete react-app-rewired . Este paquete le permite configurar la configuración externa que se agregará / anulará la configuración predeterminada del proyecto. Lo que haremos es usar babel para cargar este tipo de archivos. Sigamos adelante:

1. Instale el paquete react-app-rewired usando yarn o npm
2. En su carpeta raíz (donde se encuentra package.json ) cree un nuevo archivo con el nombre config-overrides.js

3. Ponga este código en el archivo 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
   }

Edite package.json para que los scripts start/start-js , build , test y eject utilicen react-app-rewired como se muestra en el archivo Léame del proyecto . Por ejemplo, "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom" .

Ahora puedes comenzar el proyecto y el problema debe ser resuelto. Es posible que necesite modificaciones adicionales según su proyecto (tipos adicionales, etc.).

Espero eso ayude

Como se sugiere aquí en los comentarios, es posible definir: "compilerOptions": { "allowJs": true} en su archivo tsconfig.json, para que pueda mezclar JS y TS sin reaccionar a la aplicación. Gracias por mencionar esto!

ACTUALIZACIÓN: create-react-app versión 2.1.0 admite escritura de tipo de escritura para aquellos de ustedes que están comenzando desde cero, pueden usarla para crear una nueva aplicación con escritura de escritura, y de acuerdo con la documentation , debe hacerse con el siguiente comando:

$ npx create-react-app my-app --typescript

Para los proyectos existentes, después de actualizar a la versión 2.1.0, agregue los siguientes paquetes a las dependencias de su proyecto con el siguiente comando:

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

y luego simplemente puede cambiar el nombre de .js a archivos .ts.

Answer 2

La aplicación Create React documentation hoy. Eso significa que ya no necesita expulsar o usar la bifurcación react-scripts-ts ; todo lo que debe hacer si tiene un proyecto existente de Crear aplicación React es instalar los paquetes necesarios:

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
$ # or
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

Luego, simplemente puede cambiar el nombre de los archivos .js archivos .ts para comenzar a usar TypeScript.

(Si tienes una aplicación que utiliza la bifurcación de crear, reaccionar y escribir, escribe aquí un tutorial sobre cómo portarlo a la aplicación normal Crear React ).

Answer 3

Necesitará expulsar una configuración para hacer eso.

Después de expulsar debes realizar los siguientes pasos:

1. Agregue las extensiones tsx y ts a la tabla de extensions en las configuraciones de webpack (dev y prod).

2. Añadir ts-loader. Aquí hay un ejemplo

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

3. Cambiar eslint a tslint

4. Agregue source-map-loader para tener la posibilidad de depurar archivos Typescript.

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

5. Cree un archivo de configuración de allowJs y recuerde establecer allowJs en true.