搭建RxJs开发环境

安装项目依赖

打开终端，建立一个新文件夹并进入:

> 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