在在VSCode中为React Native开发设置TypeScript, TSLint以及 Prettier这篇文章中，主要解决了如何在RN中配置Typescript以提高编写代码的质量。实际在使用的时候，需要一步步的操作，使用体验着实教人抓狂。
最近在使用Fastlane完成自动化打包的过程中，了解一些脚本化的知识点。也就想尝试能不能把上面反锁的工作，用脚本的方式来实现。
基本思路
- 提示用户输入工程名
- 创建RN工程
- 创建写入相关的配置文件
- 使用
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 .
使用步骤
- 终端
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配置，减少了大量重复、反锁技术含量不高的工作，提高了工作效率。
实际的学习中在扩充自己知识面的同时，能够把各个知识点联系在一起成为一个系统，也是很重要的技能。
