ReactNative工程创建自动化

在在VSCode中为React Native开发设置TypeScript, TSLint以及 Prettier这篇文章中，主要解决了如何在RN中配置Typescript以提高编写代码的质量。实际在使用的时候，需要一步步的操作，使用体验着实教人抓狂。

最近在使用Fastlane完成自动化打包的过程中，了解一些脚本化的知识点。也就想尝试能不能把上面反锁的工作，用脚本的方式来实现。

基本思路

1. 提示用户输入工程名
2. 创建RN工程
3. 创建写入相关的配置文件
4. 使用VSCode打开项目

实现脚本

printf "请输入项目名称\n"
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 <<EOF> .prettierrc
"semi": false,
"singleQuote": true,
"trailingComma": "none"
EOF

printf "创建tslint.json文件,并配置文件：\n"
touch tslint.json
cat <<EOF> 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文件,并配置文件：\n"
touch rn-cli.config.js
cat <<EOF> rn-cli.config.js
module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer')
  },
  getSourceExts() {
    return ['ts', 'tsx']
  },
}
EOF

printf "处理tsconfig.json文件：\n"
if [ -e tsconfig.json ] 
    then
        mv tsconfig.json tsconfig_old.json
    else
    printf "" 
fi

touch tsconfig.json
cat <<EOF> 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 文件：\n"
if [ -e App.js ] 
    then
        mv App.js App.tsx
    else
    printf ""
fi

printf "请在VSCode中安装『Prettier Code Formatter』和『TSLint』插件。\n"
printf "请在VSCode的setting.json中配置以下信息：\n"
printf "'editor.formatOnSave': true,\n'javascript.format.enable': false\n\n"

printf "请按回车键，打开自动创建的项目"
read 
code .

使用步骤

1. 终端cd到需要创建工程的地方；
2. 创建一个react-native-cli.sh文件，并将上面的脚本拷贝粘贴到该文件中
3. 使用chown -x react-native-cli.sh将react-native-cli.sh设置为可执行文件
4. 执行sh react-native-cli.sh命令，等待完成就可以了

心得

学习了iOS和Android开发，能够使用混合开发，比如React Native或者Flutter，才能把优势显示出来。

能够使用脚本"胶水"把React Native项目创建和其它脚本命令糅合在一起，自动化完成Typescript配置，减少了大量重复、反锁技术含量不高的工作，提高了工作效率。

实际的学习中在扩充自己知识面的同时，能够把各个知识点联系在一起成为一个系统，也是很重要的技能。