sh 将typescript添加到React Native项目中

Posted 2021-05-07

#!/bin/bash

# Install dependencies
#
npm i

# Move source files into src directory
#
mkdir src
mv index.js src/
mv App.js src/
mv __tests__ src/

# Replace index.js with an import from build/index.js to run the result of Typescript compilation
#
echo "import './build/index';" > index.js

# Replace React default imports in App.js file
#
perl -i -pe "s/import React, { Component } from 'react';/import * as React from 'react';\nimport { Component } from 'react';/" ./src/App.js

# Replace React default import in __tests__/App.js file
perl -i -pe "s/import React from 'react';/import * as React from 'react';/" ./src/__tests__/App.js
perl -i -pe "s/import renderer from 'react-test-renderer';/import * as renderer from 'react-test-renderer';/" ./src/__tests__/App.js

# Rename files with Typescript extensions
#
mv src/index.js src/index.tsx
mv src/App.js src/App.tsx
mv src/__tests__/App.js src/__tests__/App.test.tsx

# Create tsconfig.json
#
echo '{
  "compilerOptions": {
    "outDir": "build",
    "module": "es6",
    "target": "es6",
    "lib": ["es6", "dom"],
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "preserveConstEnums": true,
    "inlineSourceMap": true,
    "inlineSources": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitReturns": true
  },
  "exclude": [
    "node_modules",
    "build",
    "android",
    "ios",
    "./index.js"
  ],
  "compileOnSave": true,
  "include": [
    "src/*",
    "src/**/*"
  ]
}' > tsconfig.json

# Install dependencies for Typescript
#
npm i --save-dev \
typescript \
ts-jest \
@types/jest \
@types/react \
@types/react-native \
@types/react-test-renderer

# Add jest config in package.json
#
echo '
const package = require("./package.json");

package.jest = {
  "preset": "react-native",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "transform": {
    "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
    "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(src/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
  "testPathIgnorePatterns": [
    "\\.snap$",
    "<rootDir>/node_modules/",
    "<rootDir>/lib/",
    "<rootDir>/build"
  ],
  "cacheDirectory": ".jest/cache"
}

package.scripts["ios"] = "react-native run-ios";
package.scripts["android"] = "react-native run-android";

console.log(JSON.stringify(package, null, 2))
' | node > _package.json

rm package.json
mv _package.json package.json

# Add files to be ignored in .gitignore
#
echo '
# Typescript
#
build/

# Jest
#
.jest/

# VSCode react temp dir
#
.vscode/.react

' >> .gitignore

# Add configuration for vscode
#
mkdir .vscode
echo '
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }
    ]
}
' > .vscode/launch.json