RxJS 學習之旅 ~ 環境設定

2018-07-26

前言

在學習 RxJS 之前，我們要做環境設定，讓我們可以順利的完成我們的學習。
我是依 Getting Started With RxJS – Part 1: Setting Up The Development Environment & Creating Observables 這篇來實作。

實作

一開始建立測試的目錄，然後到目錄裡，透過 npm init -y 來建立 package.json，如下，

1
2
3

mkdir rxjs-test
cd rxjs-test
npm init -y

再來就是安裝需要的套件, 如下，

1 2	npm install rxjs core-js npm install webpack webpack-dev-server typescript ts-loader webpack-cli --save-dev

如果我們有用到 Promise 的話，需要多加上 core-js 哦! 如果不會用到話，就可以不需要加它。

再來就是在 package.json 的 “scripts” 中加入 “start” ，讓我們可以啟動 webpack-dev-server 來測試，

1
2
3

"scripts": {
    "start": "webpack-dev-server --mode development"
  },

因為打包是透過 webpack ，所以我們新增 webpack.config.js 來讓 webpack 執行打包作業，

const path = require('path');

module.exports = {
	entry: ['core-js/fn/promise', './src/index.ts'],
	devtool: 'inline-source-map',
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: 'ts-loader',
				exclude: /node_modules/
			}
		]
	},
	resolve: {
		extensions: ['.tsx', '.ts', '.js']
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
};

// webpack-dev-server is serving bundle.js from memory

如果會用到 Promis 的話，就需要多加 core-js/fn/promise 。
因為我們是使用 TypeScript ，所以新增 tsconfig.json 來決定要輸出到那裡，因為 webpack 是從 dist 目錄去找，所以這裡也要設定輸出到 dist 目錄，如下，

{
	"compilerOptions": {
		"outDir": "./dist/",
		"sourceMap": true,
		"noImplicitAny": true,
		"module": "commonjs",
		"moduleResolution": "node",
		"target": "es5",
		"allowJs": true,
		"lib": ["es2017", "dom"]
	}
}

準備好 TypeScript ，打包工具 webpack 後，再來就是新增測試的 index.html ，script 的 src 是 /bundle.js 是因為 webpack 產出的就是 bundle.js , 如下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RxJS Demo</title>

    <style>
        body { font-family: 'Arial'; background: lightgray }
        ul { list-style-type: none; padding: 20px; }
        li { padding: 15px; background: lightcoral; margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>RxJS Demo</h1>
    <div>
        <ul id="list"></ul>
    </div>
    <script src="/bundle.js"></script>
</body>
</html>

有了 UI 後，我們就可以寫簡單的 RxJS 練習看看了，所以建立 src 目錄，然後新增 index.ts 。 logItem function 主要是將內容顯示到網頁上。

example 1 : 是建立一個 Observable 的物件，complete() 後的 next 是不會輸出的哦!

example 2 : 從一個 number array 來產生一個 Observable 物件，再透過 pipe 將 map 與 filter 串接起來。

example 3 : 建立一個會發出 error 的 Obserable 物件。

example 4 : 透過 setTimeout 來模擬 Stream 的感覺，所以資料會過 3 秒後才會再呈現在 UI 上面。

Promise 是測試 js 在 IE 上是否可以正常運行，

// 2 mb
import { Observable, from } from 'rxjs';
import { map, filter } from 'rxjs/operators';
// import 'rxjs/add/operator/map';
// import 'rxjs/add/operator/filter';

// 從個別的模組載入 1 mb
// import { Observable } from 'rxjs/internal/Observable';
// import { from } from 'rxjs/internal/observable/from';
// import { map } from 'rxjs/internal/operators/map';
// import { filter } from 'rxjs/internal/operators/filter';

//example 1
var observable = Observable.create((observer: any) => {
	observer.next('Hello World!');
	observer.next('example 1:Hello Again!');
	observer.complete();
	observer.next('example 1:Bye Bye! After Complete');
});

observable.subscribe(
	(x: any) => logItem(`example 1:${x}`),
	(error: any) => logItem(`example 1:Error: ${error}`),
	() => logItem('example 1:Completed')
);

//example 2
let numbers = [1, 3, 5, 10];
let numbersSource = from(numbers).pipe(
	map(x => x + 1),
	filter(x => x > 3)
);
class NumberObserver {
	next(value: any) {
		logItem(`NumberObserver:${value}`);
	}

	error(e: any) {
		logItem(`NumberObserver:Error: ${e}`);
	}

	complete() {
		logItem('NumberObserver:Completed');
	}
}
numbersSource.subscribe(new NumberObserver());

//example 3 with error
var obsservableErr = Observable.create((observer: any) => {
	for (let n of numbers) {
		observer.next(n);
		if (n === 5) {
			observer.error(`number can't be 5`);
		}
	}

	observer.complete();
});
obsservableErr.subscribe(new NumberObserver());

//example 4 setTimeout
var obsservableTimeout = Observable.create((observer: any) => {
	let index = 0;
	let produceValue = () => {
		observer.next(numbers[index++]);
		if (index < numbers.length) {
			setTimeout(produceValue, 3000);
		} else {
			observer.complete();
		}
	};

	produceValue();
});
obsservableTimeout.subscribe(new NumberObserver());

function logItem(val: any) {
	var node = document.createElement('li');
	var textnode = document.createTextNode(val);
	node.appendChild(textnode);
	document.getElementById('list').appendChild(node);
}

var t1 = new Promise(function(a) {});

這時可以在 command 下輸入 npm start, 執行結果如下，

環境設定好了之後，我們就可以開始練習 RxJS 的相關操作了哦 :)

參考資料

Rxjs ultimate gitbook

Getting Started With RxJS – Part 1: Setting Up The Development Environment & Creating Observables

Angular2 why do we need the es6-shim

How can I polyfill Promise with webpack?

Property ‘from’ does not exist on type ‘typeof Observable’

RxJS v5.x to v6 Update Guide

Property ‘map’ does not exist on type Observable…

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true