index

Übersicht

Peter Koppatz

Venv/NodeEnv/Webpack

Einrichten

Ich verwende in dem Kurs zwei Entwicklungsumgebungen:

  • die virutellen Umgebungen von Python

  • Webpack für Node, npm und andere Javascript Bibliotheken

Warum?

Wer kein Python auf dem System hat oder verwenden will, kann sich eine NodeJS-Entwicklunsumgebung einrichten.

Gründe für die Kombination von Python:

  • Node wird nicht global installiert, sondern wie andere Software, isoliert in einer virtuellen Sandbox ausgeführt.

  • Python liefert einen einfachen Server, der sich gut zum Testen der Applikationen eignet (ok das Webpack-Paket bietet auch einen Server an).

Venv mit Python

  • Python 3.5 installieren ... (möglichst kurze Pfade einrichten, das spart später Tipparbeit)

  • los gehts...

Einrichtung der Python-Umgebung -- pyhton3.6 funktionierte am 1.1.2017 noch nicht, deshalb nehmen wir python3.5, alle weiteren Befehle müssen an der Konsole ausgeführt werden:

# einmalig
python3.5 -m venv js-env

# jedesmal ...
cd js-env
source ./bin/activate

# einmalig
pip install nodeenv

# jetzt die JS-Umbegung vorbereiten

pip install nodeenv
nodeenv vue

Arbeiten in der virtuellen Umgebung

# jedesmal ...
cd js-env/vue
source ./bin/activate

# webpack-cli für Vue installieren
# einmalig pro Umgebung

npm install -g vue-cli

Ein neues Vue-Projekt

# jedesmal ...
cd js-env/vue
source ./bin/activate

# berlin-clock ist hier der Projektname

vue init webpack berlin-clock

Dialog und die Ausgaben...

  This will install Vue 2.x version of template.

  For Vue 1.x use: vue init webpack#1.0 course-order

? Project name berlin-clock
? Project description JS-Test-Projekt
? Author Peter Koppatz
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "berlin-clock".

   To get started:

     cd berlin-clock
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

Was weiter oben steht ausführen...

Arbeiten im Projekt: build

cd js-env/vue
source /bin/activate
cd berlin-clock
npm run build
cd my-project/dist/

Projekt mit Webserver...

System Message: ERROR/3 (<string>, line 114)

Unexpected indentation.

  npm run build
  cd dist
  python -m http.server

Im Browser dann:
::

   http://localhost:8000