React Native: Projektvorlage (Template) erstellen

• Home
• IT
• Programmierung
• JavaScript
• React Native
• Projektvorlage (Template) erstellen

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:

1. Template-Verzeichnis erstellen (path/template-name/template).
2. Ordner und Dateien kopieren (ausser Build- und node_modules-Ordner)
3. Gepunktete .-Dateien umbenennen
4. 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.

Teile mit...

Facebook

Google

Twitter

Linkedin

Whatsapp

Email