ReactNativeエンジニアリングの自動化

VSCodeでReact NativeのためにTypescript,TSLintおよびPrettierを開発して設定した記事では,主にRNにTypescriptを構成してコードの作成品質を向上させる方法を解決した.実際に使うときは、一歩一歩の操作が必要で、使用体験が狂っています.
最近、Fastlaneを使用して自動化されたパッケージを完了する過程で、スクリプト化された知識点をいくつか理解しました.上をロックすることができるかどうかを試して、スクリプトで実現したいと思っています.
基本的な考え方

ユーザーに工事名

の入力を求める

RNエンジニアリング

の作成

書き込み関連プロファイル

を作成する.

VSCodeを使用してプロジェクト

を開く
実装スクリプト

printf "       
"
read projectName
react-native init $projectName && cd $projectName
yarn add --dev typescript react-native-typescript-transformer @types/react @types/react-native
yarn tsc --init --pretty --jsx react
yarn add --dev tslint tslint-config-prettier tslint-config-standard tslint-react prettier

touch .prettierrc
cat < .prettierrc
"semi": false,
"singleQuote": true,
"trailingComma": "none"
EOF

printf "  tslint.json  ,     ：
"
touch tslint.json
cat < tslint.json
{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-standard",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-ordering": false,
    "jsx-no-lambda": false,
    "jsx-boolean-value": false
  },
  "rulesDirectory": []
}
EOF

printf "  rn-cli.config.js  ,     ：
"
touch rn-cli.config.js
cat < rn-cli.config.js
module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer')
  },
  getSourceExts() {
    return ['ts', 'tsx']
  },
}
EOF

printf "  tsconfig.json  ：
"
if [ -e tsconfig.json ] 
    then
        mv tsconfig.json tsconfig_old.json
    else
    printf "" 
fi

touch tsconfig.json
cat < tsconfig.json
{
  "compilerOptions": {
    "target": "ES2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
    "strictFunctionTypes": true /* Enable strict checking of function types. */,
    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
    "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,
    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  }
}
EOF

printf "App.js   App.tsx   ：
"
if [ -e App.js ] 
    then
        mv App.js App.tsx
    else
    printf ""
fi

printf "  VSCode   『Prettier Code Formatter』 『TSLint』  。
"
printf "  VSCode setting.json       ：
"
printf "'editor.formatOnSave': true,
'javascript.format.enable': false

"

printf "     ，         "
read 
code .

手順の使用

端末cdは、工事を作成する必要がある場所に到着する.

react-native-cli.shのファイルを作成し、上のスクリプトを

にコピーして貼り付けます.

は、chown -x react-native-cli.shを用いるreact-native-cli.sh実行可能ファイル

に設定

sh react-native-cli.sh命令を実行し、完了待ちであれば

.
心得
iOSとAndroidの開発を学び、React NativeやFlutterのようなハイブリッド開発を使うことで、優位性を示すことができます.
スクリプト「接着剤」を使用してReact Nativeプロジェクトの作成と他のスクリプトコマンドを混ぜ合わせることができ、Typescript構成を自動化し、重複が多く、ロック技術の含有量が低い作業を減らし、作業効率を向上させることができます.
実際の学習では自分の知識面を拡充するとともに、それぞれの知識点を結びつけて一つのシステムになることも重要なスキルです.