Nach der Projektvorbereitung und Einrichtung der wichtigen Komponente, bevor man anfängt mit der eigentlichen Programmierung, kann man daraus ein Template für zukünftige Projekte erstellen. Wird ein Projekt mit so einer eingerichteten Vorlage initialisiert, sparrt man sich die Zeit für manuelles Einfügen und Einrichten der Erweiterungen.
Leeres Projekt erstellen
Siehe: Projekt anlegen und Projekt einrichten.
Projekt in ein Template umwandeln
Die Umwandlung eines Projektes in ein Template erfordert folgende Schritte:
- Template-Verzeichnis erstellen (path/template-name/template).
- Ordner und Dateien kopieren (ausser Build- und node_modules-Ordner)
- Gepunktete .-Dateien umbenennen
- Zusätzliche Template-Dateien hinzufügen (template.config.js, package.json, package-lock.json, .gitignore).
Hier ein Bash-Skript, das diese Arbeit automatisch erledigt (Download):
create-react-native-template.sh
#!/bin/bash # IMPORTANT! Customize values for Paths, Files, Folders and further variables below! # 1. Make script executable: chmod +x create-react-native-template.sh # 2. Customize script. # 3. Run script: ./create-react-native-template.sh # 4. Create new React Native project from this template: npx react-native init --template file:///path/to/template/root/folder # the template name TEMPLATE_NAME="my-react-native-template-typescript" # template version TEMPLATE_VERSION="0.0.1" # version of the package-lock.json file LOCK_FILE_VERSION="1" # author name AUTHOR="Alexander Stepien" # E-Mail address AUTHOR_MAIL="alexwatermann@technik-tipps-und-tricks.de" # homepage HOMEPAGE="http://www.technik-tipps-und-tricks.de/it/programmierung/javascript/react-native" # short template desription DESCRIPTION="React Native template with TypeScript, Redux, Async-Storage, React-Navigation, NativeBase, i18next internalization." # source project for template PROJECT_PATH="/home/$USER/Development/REACT-NATIVE/ReactNativeDemo" # absolute path to the template root folder TEMPLATE_PATH="/home/$USER/Development/REACT-NATIVE/TEMPLATES/${TEMPLATE_NAME}" # list of folders to be copied FOLDER_LIST=" android ios src __tests__" # list of files to be copied FILE_LIST=" app.json App.tsx babel.config.js .buckconfig .eslintrc.js .gitattributes .gitignore index.js metro.config.js package.json .prettierrc.js tsconfig.json .watchmanconfig" # copy project data to template mkdir -p $TEMPLATE_PATH/template if test -d $TEMPLATE_PATH/template; then echo "INFO: Ordner $TEMPLATE_PATH/template erstellt" # copy folders, exclude builds for FOLDERNAME in $FOLDER_LIST do if test -d $PROJECT_PATH/$FOLDERNAME; then if [ "$FOLDERNAME" == "android" ]; then rsync -a --exclude="app/build" --exclude=".directory" ${PROJECT_PATH}/android $TEMPLATE_PATH/template elif [ "$FOLDERNAME" == "ios" ]; then rsync -a --exclude="build" --exclude=".directory" ${PROJECT_PATH}/ios $TEMPLATE_PATH/template else cp -R $PROJECT_PATH/$FOLDERNAME $TEMPLATE_PATH/template fi else echo "WARNUNG: Ordner $FOLDERNAME nicht vorhanden." fi done # copy files for FILENAME in $FILE_LIST do if test -f $PROJECT_PATH/$FILENAME; then cp $PROJECT_PATH/$FILENAME $TEMPLATE_PATH/template else echo "WARNUNG: Datei $FILENAME nicht vorhanden." fi done # rename dot-files typeset -a DOT_FILES DOT_FILES=$(find ${TEMPLATE_PATH}/template/ -maxdepth 1 -type f -name ".*" -exec basename {} \;) for FILENAME in $DOT_FILES do NEWFILENAME=$(echo ${FILENAME} | tr '.' '_') mv $TEMPLATE_PATH/template/$FILENAME $TEMPLATE_PATH/template/$NEWFILENAME done else echo "FEHLER: Ordner $TEMPLATE_PATH/template konnte nicht erstellt werden." fi # create 'package-lock.json' file touch $TEMPLATE_PATH/package-lock.json FILE="${TEMPLATE_PATH}/package-lock.json" /bin/cat <<EOM >$FILE { "name": "${TEMPLATE_NAME}", "version": "$TEMPLATE_VERSION", "lockfileVersion": $LOCK_FILE_VERSION } EOM # create 'package.json' file touch $TEMPLATE_PATH/package.json FILE="${TEMPLATE_PATH}/package.json" /bin/cat <<EOM >$FILE { "name": "${TEMPLATE_NAME}", "version": "$TEMPLATE_VERSION", "description": "$DESCRIPTION", "scripts": { "prepublishOnly": "" }, "files": [ "template", "template.config.js" ], "repository": { "type": "git", "url": "" }, "keywords": [ "react-native", "typescript", "jest", "template", "boilerplate", "redux", "react-navigation", "native-base", "i18next" ], "author": "${AUTHOR} <${AUTHOR_MAIL}>", "license": "MIT", "homepage": "$HOMEPAGE" } EOM # create 'template.config.js' file touch $TEMPLATE_PATH/template.config.js FILE="${TEMPLATE_PATH}/template.config.js" /bin/cat <<EOM >$FILE module.exports = { placeholderName: 'HelloWorld', templateDir: './template', } EOM # create '.gitignore' file touch $TEMPLATE_PATH/.gitignore FILE="${TEMPLATE_PATH}/.gitignore" /bin/cat <<EOM >$FILE node_modules/ .vscode/ .DS_Store EOM # create 'README.md' file touch $TEMPLATE_PATH/README.md FILE="${TEMPLATE_PATH}/README.md" /bin/cat <<EOM >$FILE ${TEMPLATE_NAME} - README file EOM exit
Das heruntergeladene Skript entpacken und ausführbar machen:
$ tar xvzf create-react-native-template.tar.gz $ chmod +x create-react-native-template.sh
Das Skript konfigurieren (Pfade und Werte anpassen) und ausführen:
$ ./create-react-native-template.sh
Projekt aus dem Template erstellen
$ npx react-native init YourAppName --template file:///home/$USER/path/to/your/template/folder
War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?
Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!
Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.