安裝項(xiàng)目依賴
打開(kāi)終端，建立一個(gè)新文件夾并進(jìn)入:
> mkdir rxjs && cd rxjs
我們這里用yarn作為包管理器拙泽，你也可以用npm，執(zhí)行下面命令泼疑，創(chuàng)建package.json 文件：
> yarn init -y
接下來(lái)荷荤，我們用yarn 添加RxJS蕴纳，Webpack 和TypeScript:
> yarn add rxjs webpack webpack-dev-server typescript ts-loader
我們還需要安裝webpack-cli作為開(kāi)發(fā)依賴：
> yarn add webpack-cli --dev
很好，接下來(lái)我們?nèi)?chuàng)建一些文件：
編輯 Package.json
打開(kāi)你常用的編輯器
打開(kāi) package.json 文件袱蚓，并且加入以下內(nèi)容：
{
"name": "rxjs",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
// Add this
"scripts": {
"start": "webpack-dev-server --mode development"
},
不久之后我們將運(yùn)行 yarn run start命令，它將為我們創(chuàng)建一個(gè)開(kāi)發(fā)環(huán)境用于學(xué)習(xí)RxJS.
設(shè)置 Webpack
創(chuàng)建一個(gè) 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')
}
};
這里唯一要注意的是我們定義的應(yīng)用入口文件路徑為 ./src/code.ts 絮吵。請(qǐng)注意 .ts擴(kuò)展名忱屑，這是專門(mén)為T(mén)ypeScript定制的莺戒，如果你不想用TypeScript，你也可以把它改成常用的.js文件
TypeScript 配置
創(chuàng)建另一個(gè)名為tsconfig.json的文件瘪校，然后粘貼以下配置信息
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
這個(gè)配置允許我們將es2017 JavaScript (es8) 轉(zhuǎn)換成2015 (es6).
完成項(xiàng)目設(shè)置
創(chuàng)建一個(gè) 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>
在學(xué)習(xí)RxJS期間阱扬，我們將把所有結(jié)果輸出到#output這個(gè)無(wú)序列表中麻惶，而不是打印到控制臺(tái)信夫。
我還添加了一下基本的樣式卡啰，正如你所看到的樣子碎乃。
接下來(lái)惠奸，創(chuàng)建一個(gè)名為src的文件夾恰梢，在這個(gè)文件夾中創(chuàng)建一個(gè)code.ts文件嵌言，并在其中粘貼以下代碼
import * as Rx from "rxjs/Observable";
console.log(Rx);
再次進(jìn)入終端摧茴，在這個(gè)項(xiàng)目文件夾下輸入以下命令啟動(dòng)項(xiàng)目：
> yarn run start
在瀏覽器中訪問(wèn) http://localhost:8080 ，并打開(kāi)控制臺(tái)娃豹，你可以使用> Object
這就意味著你的RxJS 開(kāi)發(fā)環(huán)境已經(jīng)搭建成功购裙！
（譯者注）如果編譯失敗躏率，可能是RxJs版本問(wèn)題，執(zhí)行以下命令：
>yarn add rxjs-compat
原文鏈接：https://coursetro.com/posts/code/147/How-to-Install-RxJS---Setting-up-a-Development-Environment
