前端Rollup RxJs响应式编程实践

响应式编程

以下概念介绍，基于 node v10.16.3 版本进行。不满足条件的，请移步 google or 度娘。

概念介绍

const a = 1,b = 2;
const c = a  b;

响应式编程，当a,b再次变化时，c会再次做出修改。

背景

• RxJS是一个用于使用Observables进行响应式编程的库
• 可简化编写异步或基于回调的代码

本地环境搭建

• node
• npm script
• rollup

 npm install --global rollup

• rxjs

 npm install rxjs

• es6 语法，利用tree-shaking ，缩减代码

使用

hello-world 之123

import { of } from 'rxjs';
import { map } from 'rxjs/operators';
of(1,2,3).subscribe(res => {
    console.log(res);
});

rollup打包→ bundle.js → node bundle.js，连续输出123

rollup main.js --file bundle.js --format cjs

'use strict';

var rxjs = require('rxjs');
require('rxjs/operators');

rxjs.of(1,2,3).subscribe(res => {
    console.log(res);
});

优化rollup配置

创建rollup.config.js

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

rollup -c rollup.config.js 

npm script支持

package.json

 {
 "name": "rxjs-demo",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"rollup -c", // 默认配置 rollup --config  rollup.config.js
    "start":"npm run build && node bundle.js"   // && 是继发，& 是并发
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "rxjs