[英]Migrating create-react-app from javascript to typescript
I started a react project using create-react-app few months ago and I'm interesting in migrating the project from Javascript to Typescript.几个月前,我使用 create-react-app 启动了一个 React 项目,我很感兴趣将项目从 Javascript 迁移到 Typescript。
I saw that there is a way to create react app with typescript using the flag:我看到有一种方法可以使用标志创建带有 typescript 的 React 应用程序:
--scripts-version=react-scripts-ts
But I didn't find any explanation how can I migrate an existing JS project to TS.但是我没有找到任何解释如何将现有的 JS 项目迁移到 TS。 I need it to be done incrementally so I can work with both.js and.ts files so I can do the transformation over time.
我需要逐步完成它,这样我就可以同时使用 .js 和 .ts 文件,这样我就可以随着时间的推移进行转换。 Does anyone has any experience with this migration?
有没有人对此迁移有任何经验? What are the required steps that should be done to make this work?
完成这项工作需要执行哪些必要步骤?
UPDATE: create-react-app version 2.1.0 support typescript so for those of you who are starting from scratch you can use it to create new application with typescript, and according to the documentation it should be done with the following command:更新: create-react-app 版本 2.1.0 支持打字稿,因此对于那些从头开始的人,您可以使用它来创建带有打字稿的新应用程序,根据文档,应该使用以下命令完成:
$ npx create-react-app my-app --typescript
For existing projects, after updating to version 2.1.0, add the following packages to your project's dependencies with the following command:对于现有项目,更新到 2.1.0 版本后,使用以下命令将以下包添加到项目的依赖项中:
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
and then you can simply rename .js to .ts files.然后你可以简单地将 .js 重命名为 .ts 文件。
I found a solution to migrate create-react-app from javascript to typescript, this way doesn't require eject.我找到了一个将 create-react-app 从 javascript 迁移到 typescript 的解决方案,这种方式不需要弹出。
create-react-app --scripts-version=react-scripts-ts
(Note - requires create-react-app
to be installed globally)create-react-app --scripts-version=react-scripts-ts
创建一个带有 typescript 的临时反应项目(注意 - 需要全局安装create-react-app
)package.json
file remove the react-scripts
package.json
文件下删除react-scripts
react-scripts-ts
to your project by running the command yarn add react-scripts-ts
or if your are using npm then npm install react-scripts-ts
.react-scripts-ts
通过运行命令添加到您的项目yarn add react-scripts-ts
,或者如果您正在使用NPM然后npm install react-scripts-ts
。 Or, add "react-scripts-ts": "2.8.0"
to package.json."react-scripts-ts": "2.8.0"
到 package.json。tsconfig.json, tsconfig.test.json tslint.json
to your own projecttsconfig.json, tsconfig.test.json tslint.json
到您自己的项目中package.json
, under scripts section, change react-scripts
instances to react-scripts-ts
(should be under start
, build
, test
and eject
package.json
,在 scripts 部分,将react-scripts
实例更改为react-scripts-ts
(应该在start
, build
, test
和eject
@types/node
, @types/react
and @types/react-dom
.@types/node
: @types/node
、 @types/react
和@types/react-dom
。 Put in devDependencies
section if using package.json.devDependencies
部分。index.js
file name to index.tsx
index.js
文件名更改为index.tsx
"allowSyntheticDefaultImports": true
- for more info"allowSyntheticDefaultImports": true
- 了解更多信息NOTE step 7 might require additional modification depends on what you have in your index.js file (if it depends on JS modules in the project).注意第 7 步可能需要额外的修改,这取决于您在 index.js 文件中的内容(如果它依赖于项目中的 JS 模块)。
Now you can run your project and it might work, for those of you who are getting error that contains You may need an appropriate loader to handle this file type
regarding .js files, it happens because babel doesn't know how to load .js file from .tsx files.现在你可以运行你的项目,它可能会工作,对于那些收到错误的人
You may need an appropriate loader to handle this file type
关于 .js 文件的You may need an appropriate loader to handle this file type
,这是因为 babel 不知道如何加载 .js .tsx 文件中的文件。 What we need to do is to change the project configuration.我们需要做的是改变项目配置。 The way I found doing it without running
eject
is using react-app-rewired package.我发现不运行
eject
是使用react-app-rewired包。 This package lets you configure external configuration which will be added/override the default project settings.此包允许您配置将添加/覆盖默认项目设置的外部配置。 What we'll do is using babel to load these type of files.
我们要做的是使用 babel 来加载这些类型的文件。 Let's moved on:
让我们继续:
Install the package react-app-rewired
using yarn or npm使用 yarn 或 npm 安装包
react-app-rewired
rewired
In your root folder (where package.json
is located) create a new file with the name config-overrides.js
在您的根文件夹(
package.json
所在的位置)中创建一个名为config-overrides.js
的新文件
Put this code in config-overrides
file:将此代码放在
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 }
Edit package.json so the start/start-js
, build
, test
, and eject
scripts use react-app-rewired as shown in the project readme .编辑 package.json 以便
start/start-js
、 build
、 test
和eject
脚本使用 react-app-rewired ,如项目自述文件中所示。 Eg "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"
.例如
"test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"
。
Now you can start you the project and the problem should be solved.现在你可以开始你的项目了,问题应该解决了。 You might need additional modifications depending on your project (additional types and so).
根据您的项目(其他类型等),您可能需要额外的修改。
Hope it helps希望能帮助到你
As suggested here in the comments, it's possible to define: "compilerOptions": { "allowJs": true}
in your tsconfig.json file, so you can mix JS and TS without react-app-rewired.正如评论中所建议的,可以在 tsconfig.json 文件中定义:
"compilerOptions": { "allowJs": true}
,因此您可以在不使用 react-app-rewired 的情况下混合 JS 和 TS。 Thanks for mention this!感谢您提到这一点!
Create React App v2.1.0 was released today with TypeScript support today. Create React App v2.1.0 今天发布,支持 TypeScript 。 That means you no longer need to eject or use the
react-scripts-ts
fork;这意味着您不再需要弹出或使用
react-scripts-ts
叉; all you need to do if you have an existing Create React App project is install the required packages:如果你有一个现有的 Create React App 项目, 你需要做的就是安装所需的包:
$ 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
You can then simply rename .js
files to .ts
files to start using TypeScript.然后,您可以简单地将
.js
文件重命名为.ts
文件以开始使用 TypeScript。
(If you have an existing app using the create-react-app-typescript fork, here's a tutorial on how to port it to regular Create React App .) (如果您有一个使用 create-react-app-typescript fork 的现有应用程序,这里有一个关于如何将其移植到常规 Create React App的教程。)
You will need to eject a configuration in order to do that.您需要弹出配置才能执行此操作。
After ejecting you need to perform the following steps:弹出后,您需要执行以下步骤:
tsx
and ts
to the extensions
table in the webpack configs (dev and prod).tsx
和ts
添加到 webpack 配置(dev 和 prod)中的extensions
表。 Add ts-loader.添加 ts-loader。 Here is an example
这是一个例子
{ test: /\\.(ts|tsx)$/, include: paths.appSrc, use: [ { loader: require.resolve('ts-loader'), }, ], },
Change eslint to tslint将 eslint 改为 tslint
Add source-map-loader to get a possibility to debug Typescript files.添加 source-map-loader 以获得调试 Typescript 文件的可能性。
{ test: /\\.js$/, loader: require.resolve('source-map-loader'), enforce: 'pre', include: paths.appSrc, }
Create a Typescript config file and remember to set allowJs
to true.创建一个 Typescript 配置文件并记住将
allowJs
设置为 true。
1). 1). run
跑步
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
2). 2). Add the tsconfig.json
添加 tsconfig.json
run
npx tsc --init
运行
npx tsc --init
3). 3). Add this to the tsconfig
将此添加到 tsconfig
"compilerOptions": {
"jsx": "react-jsx", // this line
Now you can integrate tsx
into an existing project现在您可以将
tsx
集成到现有项目中
1). 1)。 run
跑步
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
2). 2)。 Rename any file to be a TypeScript file (eg src/index.js to src/index.tsx)
将任何文件重命名为 TypeScript 文件(例如 src/index.js 到 src/index.tsx)
3). 3)。 run
npm i @types/react-dom @types/react-redux @types/react-router-dom
运行
npm i @types/react-dom @types/react-redux @types/react-router-dom
4). 4)。 Restart your development server!
重启你的开发服务器!
enjoy :)享受:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.