安装项目依赖
打开终端，建立一个新文件夹并进入:
> mkdir rxjs && cd rxjs
我们这里用yarn作为包管理器，你也可以用npm，执行下面命令，创建package.json 文件：
> yarn init -y
接下来，我们用yarn 添加RxJS，Webpack 和TypeScript:
> yarn add rxjs webpack webpack-dev-server typescript ts-loader
我们还需要安装webpack-cli作为开发依赖：
> yarn add webpack-cli --dev
很好，接下来我们去创建一些文件：
编辑 Package.json
打开你常用的编辑器
打开 package.json 文件，并且加入以下内容：
{
"name": "rxjs",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
// Add this
"scripts": {
"start": "webpack-dev-server --mode development"
},
不久之后我们将运行 yarn run start命令，它将为我们创建一个开发环境用于学习RxJS.
设置 Webpack
创建一个 webpack.config.js 文件，并且粘贴以下代码片段
const path = require('path');
module.exports = {
entry: './src/code.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')
}
};
这里唯一要注意的是我们定义的应用入口文件路径为 ./src/code.ts 。请注意 .ts扩展名，这是专门为TypeScript定制的，如果你不想用TypeScript，你也可以把它改成常用的.js文件
TypeScript 配置
创建另一个名为tsconfig.json的文件，然后粘贴以下配置信息
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
这个配置允许我们将es2017 JavaScript (es8) 转换成2015 (es6).
完成项目设置
创建一个 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'; background: #ececec; }
ul { list-style-type: none; padding: 20px; }
li { padding: 20px; background: white; margin-bottom: 5px; }
</style>
</head>
<body>
<ul id="output"></ul>
<script src="/bundle.js"></script>
</body>
</html>
在学习RxJS期间，我们将把所有结果输出到#output这个无序列表中，而不是打印到控制台。
我还添加了一下基本的样式，正如你所看到的样子。
接下来，创建一个名为src的文件夹，在这个文件夹中创建一个code.ts文件，并在其中粘贴以下代码
import * as Rx from "rxjs/Observable";
console.log(Rx);
再次进入终端，在这个项目文件夹下输入以下命令启动项目：
> yarn run start
在浏览器中访问 http://localhost:8080 ，并打开控制台，你可以使用> Object
这就意味着你的RxJS 开发环境已经搭建成功！
（译者注）如果编译失败，可能是RxJs版本问题，执行以下命令：
>yarn add rxjs-compat
原文链接：https://coursetro.com/posts/code/147/How-to-Install-RxJS---Setting-up-a-Development-Environment
网友评论