react-native 项目配置ts运行环境

发布时间：2020-12-15 20:39:28 所属栏目：百科来源：网络整理

导读：#全局安装?create-react-native-app yarn global add create-react-native-app #创建项目 ?create-react-native-app? my-app #安装ts依赖 yarn add typescript tslint -D ? yarn add @types/react @types/react-native @types/react-dom -D yarn add concurr

#全局安装?create-react-native-app

yarn global add create-react-native-app

#创建项目

?create-react-native-app? my-app

#安装ts依赖

yarn add typescript tslint -D

? yarn add @types/react @types/react-native @types/react-dom -D

yarn add concurrently rimraf -D

#在根目录下创建一个tsconfig.json配置文件，或者tsc --init生成默认配置文件再修改，把下面代码贴上去

{
"compilerOptions": {
"module":"es2015","target": "es2015","jsx": "react","rootDir": "src","outDir": "build","allowSyntheticDefaultImports": true,"noImplicitAny": true,"sourceMap": true,"experimentalDecorators": true,"preserveConstEnums": true,"allowJs": true,"noUnusedLocals": true,"noUnusedParameters": true,"noImplicitReturns": true,"skipLibCheck": true,"moduleResolution": "Node","baseUrl": "./","paths": {
"assets": ["./assets"]
}
},"filesGlob": [
"typings/index.d.ts","src/**/*.ts","src/**/*.tsx","node_modules/typescript/lib/lib.es6.d.ts"
],"types": [
"react","react-dom","react-native"
],"exclude":[
"build","node_modules","jest.config.js","App.js","assets"
],"compileOnSave": false
}

#配置脚本命令，记得先安装react-native-script

将下面代码配置在package.json中

"scripts": {
"start": "react-native-scripts start","eject": "react-native-scripts eject","android": "react-native-scripts android","ios": "react-native-scripts ios","test": "node node_modules/jest/bin/jest.js","lint": "tslint src/**/*.ts","tsc": "tsc","clean": "rimraf build","build": "yarn run clean && yarn run tsc --","watch": "yarn run build -- -w","watchAndRunAndroid": "concurrently "yarn run watch" "yarn run android"","buildRunAndroid": "yarn run build && yarn run watchAndRunAndroid ","watchAndRunIOS": "concurrently "yarn run watch" "yarn run ios"","buildRunIOS": "yarn run build && yarn run watchAndRunIOS ","watchAndStart": "concurrently "yarn run watch" "yarn run start"","buildAndStart": "yarn run build && yarn run watchAndStart "
},

#最后最重要的在package文件中把入口地址修改

"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js"

#把babel.config文件放在src下面，在src文件创建ts文件，开心的写项目吧

#yarn?buildAndStart启动服务（复合命令）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!