【开发Tips】RxJS的环境配置

哥斯拉撕家
1,567 阅读2分钟

目前只是在mac本上运行成功了，windows本上还没有试过，之后更新体验。 参考资料是：

我使用比较熟悉的npm来安装。

安装RxJS

本来想直接引用cdn上打包好的RxJS，结果老是出not in module的错误，估计是需要项目化，还是怎么地，是个迷，之后能清楚了来补坑。

创建一个文件夹，cd到这个文件夹下，先执行初始命令

npm init -y

在执行安装，安装rxjs，webpack ，webpack server，typescript，ts-loader这些安装包。为啥装这么多包，我也没想明白，想明白回来补坑。

npm install rxjs webpack webpack-dev-server typescript ts-loader

既然安装了webpack，那么还需要安装webpack的服务。

npm install webpack-cli --save-dev

都安装好了之后，文件夹里应该有package.json 和node_modules

配置RxJS项目

  • 配置package.json

添加自动打包的语言：之后运行npm run start就可以了

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

完成后的全部结果如下：

{
"name": "你文件夹的名字",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {//用于自动打包
  "start": "webpack-dev-server --mode development"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {//注意检查安装的包都有吗
   "rxjs": "^6.5.4",
   "ts-loader": "^6.2.1",
   "typescript": "^3.7.5",
   "webpack": "^4.41.5",
   "webpack-dev-server": "^3.10.1"
 },
 "devDependencies": {//注意检查webpack服务添加了吗
  "webpack-cli": "^3.3.10"
 }
}

  • 创建webpack.config.js

const path = require('path');
module.exports = {
   //entry是程序的入口, 创建自己的js或ts，我用的是index.ts
  entry: './src/index.ts',
   devtool: 'inline-source-map',
   module: {
       rules: [
           {
               test: /\.tsx?$/,
               use: 'ts-loader',
               exclude: /node_modules/
           }
       ]
   },
   resolve: {
       extensions: [ '.ts', '.js', '.tsx' ]
   },
   output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
   }
};

  • 创建tsconfig.js

{
 "compilerOptions": {
   "outDir": "./dist/",
   "noImplicitAny": true,
   "module": "es6",
   "moduleResolution": "node",
   "sourceMap": true,
   "target": "es6",
   "typeRoots": [
     "node_modules/@types"
   ],
   "lib": [
     "es2017",
     "dom"
   ]
 }
}

测试项目成功了没有

添加一个index.html

<!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>Learn RxJS with Coursetro</title>
   <style>
       body { font-family: 'Arial',serif; background: #ececec; }
       ul { list-style-type: none; padding: 20px; }
       li { padding: 20px; background: white; margin-bottom: 5px; }
   </style>
</head>
<body>
<h1>RxJS Learning Demo</h1>
<ul id="output"></ul>
<script src="/bundle.js"></script>
</body>
</html>

创建一个index.ts来实验

import {Observable} from "rxjs";
var observable = Observable.create((observer:any)=>{
   observer.next("Hello world");
});
observable.subscribe(
   (x:any)=>console.log(x),
   (error:any)=>logItem(`error: ${error}`),
   ()=>logItem("complete!")
);

注意index.ts的位置

目录结构
运行npm run start
在terminal得到的结果
chrome打开http：//localhost：8080/
结果页

通过cdn直接部署

上面的方法是属于工程模块化的部署，如果自己乱开一个js，配置path不正确，那么会出现outside module的错误。

单纯想使用rxjs做异步编程的话，直接也可以使用cdn引用配置。

<script src="https://cdn.bootcss.com/rxjs/6.0.0-alpha.3/Rx.min.js"></script>

注意：不要使用import，直接使用Rx.来调用

let observable = Rx.Observable.create(observer => {
   observer.next("Hello world");
   observer.next("Hello again");
});
observable.subscribe(x => console.log(x));

总结

reactivex官方网站上的指南，真的是对初次接触RxJS的人非常不友好，没有用过Angular的，按照它的指南来搭建会有一个很大的学习曲线。我费了一个下午才运行起来，希望给大家避坑。未来ES7很可能会加入observable的概念，学习RxJS也算是个小趋势，另外RxJS的使用感是真香啊！

avatar
文章
阅读
粉丝