Co działo się w lutym na blogu? Oto podsumowanie:

W lutym napisałem 6 wpisów:

JavaScript:

1. RxJS: Podstawy
2. Jak stworzyć stały obiekt?
3. RxJS: fromEvent
4. RxJS: Operator of
5. Webpack i TypeScript podstawowa konfiguracja

Inne:

1. Pułapka produktywności: nie mam czasu

Przeczytałem dwie książki:

1. Bohaterowie - Joe Abercrombie
2. Praca i inne grzechy - Charlie LeDuff

Przesłuchałem dwa audiobooki:

1. The Creative Habit - Twyla Tharp
2. Saturnin - Jakub Małecki

Operator of zamienia podane, w parametrach wartości w obiekt Observable.

Wywołanie tego obiektu spowoduje wysłanie wartości, w jakiej kolejności zostały przekazane do of.

Operator of przykłady

Przykład 1

import { of } from 'rxjs';

const observable = of(3, 2, 1);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: 3
// value: 2
// value: 1

Przykład 2

Jako parametry można przekazywać wartości różnego typu:

import { of } from 'rxjs';

const observable = of([1, 2, 3], 'Some text', true);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: [1, 2, 3]
// value: Some text
// value: true

fromEvent tworzy obiekt typu Observable. Służy do obsługi zdarzeń. Jak na przykład zdarzenie kliknięcia przycisku myszy lub przycisku na klawiaturze.

Przyjmuje następujące parametry:

1. target — To obiekt, z którego będą generowane zdarzenia.
2. eventName — To nazwa zdarzenia, które będzie wysyłane przez obiekt określony, w parametrze target.
3. options — Dodatkowo dane, które zostaną przekazane do addEventListener.

Przykład

import { fromEvent } from 'rxjs';

const btnEl = document.querySelector('#button');
const observable = fromEvent(btnEl, 'click');

observable.subscribe(value => console.log('Event: ', value));

Stworzenie stałej w JavaScript jest bardzo proste:

const value = 7;

Skoro jest to stała, nie można zmienić jej wartości:

const value = 7;

value = 'test';
// Uncaught TypeError: invalid assignment to const 'value' w FireFox

A co z obiektami?

Stałe obiekty

const obj = {
  name: 'Product X',
  value: 1200
}

W takim przypadku możemy zmienić właściwości obiektu, ale nie możemy ustawić nowej wartości obj:

const obj = {
  name: 'Product X',
  value: 1200
};

obj.name = 'Product Y'; // Ok
obj.value = 700; // Ok

obj = { age: 20 }; // Błąd!

Jak można stworzyć stały obiekt, którego nie da się zmienić?

Object.freeze

W klasie Object istnieje metoda freeze, która sprawia, że obiekt stanie się stały:

const obj = {
  name: 'Product X',
  value: 1200
};

Object.freeze(obj);

obj.name = 'Product Y';
delete obj.value;
obj.age = 20;

console.log(obj); // { name: 'Product X', value: 20 }

Do obiektu nie można nic dodać, usunąć lub zmienić wartości jednego z istniejących właściwości.

Żeby stworzyć podstawową konfigurację w Webpack, do obsługi TypeScript wystarczy:

Instalowanie zależności

Tworzymy plik package.json:

npm init

Następnie instalujemy Webpack:

npm i --save-dev webpack webpack-cli

Kolejny krok instalacja TypeScripta:

npm install --save-dev typescript ts-loader

Dodajemy HTML Webpack plugin:

npm i --save-dev html-webpack-plugin

Ten plugin sprawi, że stworzy dla nas z automatu plik index.html. Więcej o tym trochę później.

Na koniec zainstalujmy jeszcze Webpack dev server. To pomocne narzędzie do automatycznego przeładowania aplikacji, w momencie zmiany kodu:

npm install --save-dev webpack-dev-server

Konfiguracja

Zabieramy się za konfigurację.

Stwórz plik o nazwie: tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node"
    }
}

To jest plik konfiguracyjny dla compilera TypeScript.

Stwórz plik o nazwie: webpack.config.js i dodaj:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devServer: {
        static: './src',
        hot: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
        }),
    ],
};

Pole entry określa plik napisany, w TypeScript. W taki sposób informujemy Webpack skąd, ma pobrać kod źródłowy naszej aplikacji. W output podajemy nazwę pliku filename, jaką ma mieć przekompilowany kod. devServer tutaj powiadamiamy Webpack dev server miejsce (static), jakie ma nasłuchiwać podczas ewentualnych zmian kodu. hot ustawione na true sprawi, że po zapisie zmiany w kodzie aplikacja zostanie przeładowana automatycznie.

Dodaliśmy jeszcze plugin: HtmlWebpackPlugin stworzy dla nas automatycznie plik: index.html.

Skrypty

Na koniec konfiguracji dodajmy do pliku package.json do sekcji scripts dodajemy takie polecenia:

"scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production",
    "serve": "webpack-dev-server --open --mode=development --config webpack.config.js"
}

Skrypt build przekompiluje nam kod do zminimalizowanej wersji.

Skrypt dev stworzy wersję deweloperską.

Z kolei serve uruchomi Webpacka działającego w tle i nasłuchującego na ewentualne zmiany w kodzie.

Przykład

Teraz czas to wypróbować. Stwórz katalog: src a w nim takie pliki:

foo.ts:

export const foo = () => {
    console.log('Foo call!');
};

index.ts:

import { foo } from './foo';

foo();

Następnie uruchom skrypt:

npm run dev 

Zostanie stworzony katalog dist i plik index.js. Sprawdź zawartość tego pliku.

Uruchom skrypt:

npm run build 

Ponownie zajrzyj do pliku w dist/index.js.

Ostatni skrypt:

npm run serve 

Zostanie uruchomiona aplikacja, w przeglądarce.

Zmień kod w katalogu: src dowolny plik. Po zapisie kod zostanie przekompilowany. Jeśli coś zmienisz i zapiszesz te zmiany, aplikacja zostanie przeładowana także w przeglądarce.