RxJS - การตั้งค่าสภาพแวดล้อม

ในบทนี้เราจะติดตั้ง RxJS ในการทำงานกับ RxJS เราจำเป็นต้องมีการตั้งค่าต่อไปนี้ -

  • NodeJS
  • Npm
  • การติดตั้งแพ็คเกจ RxJS

การติดตั้ง NODEJS และ NPM

การติดตั้ง RxJS โดยใช้ npm นั้นง่ายมาก คุณต้องติดตั้ง nodejs และ npm ในระบบของคุณ หากต้องการตรวจสอบว่ามีการติดตั้ง NodeJS และ npm ในระบบของคุณหรือไม่ให้ลองดำเนินการคำสั่งต่อไปนี้ในพรอมต์คำสั่งของคุณ

E:\>node -v && npm -v
v10.15.1
6.4.1

ในกรณีที่คุณได้รับเวอร์ชันหมายความว่ามีการติดตั้ง nodejs และ npm ในระบบของคุณและเวอร์ชันคือ 10 และ 6 ในระบบในขณะนี้

หากไม่พิมพ์อะไรเลยให้ติดตั้ง nodejs บนระบบของคุณ ในการติดตั้ง nodejs ให้ไปที่โฮมเพจhttps://nodejs.org/en/download/ ของ nodejs และติดตั้งแพ็คเกจตามระบบปฏิบัติการของคุณ

หน้าดาวน์โหลดของ nodejs จะมีลักษณะดังต่อไปนี้ -

ติดตั้งแพคเกจที่จำเป็นตามระบบปฏิบัติการของคุณ เมื่อติดตั้ง nodejs แล้วจะมีการติดตั้ง npm ควบคู่ไปด้วย หากต้องการตรวจสอบว่ามีการติดตั้ง npm หรือไม่ให้พิมพ์ npm –v ในเทอร์มินัล ควรแสดงเวอร์ชันของ npm

การติดตั้งแพ็คเกจ RxJS

ในการเริ่มต้นด้วยการติดตั้ง RxJS ขั้นแรกให้สร้างโฟลเดอร์ชื่อ rxjsproj/ ที่ซึ่งเราจะฝึกฝนตัวอย่าง RxJS ทั้งหมด

เมื่อโฟลเดอร์ rxjsproj/ ถูกสร้างรันคำสั่ง npm initสำหรับการตั้งค่าโครงการตามที่แสดงด้านล่าง

E:\>mkdir rxjsproj
E:\>cd rxjsproj
E:\rxjsproj>npm init

Npm initคำสั่งจะถามคำถามสองสามข้อในระหว่างการดำเนินการเพียงแค่กด Enter และดำเนินการต่อ เมื่อดำเนินการ npm init เสร็จแล้วก็จะสร้างpackage.json ภายใน rxjsproj / ดังแสดงด้านล่าง -

rxjsproj/
   package.json

ตอนนี้คุณสามารถติดตั้ง rxjs โดยใช้คำสั่งด้านล่าง -

npm install ---save-dev rxjs
E:\rxjsproj>npm install --save-dev rxjs
npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 2 packages from 7 contributors and audited 2 packages in 21.89s
found 0 vulnerabilities

เสร็จสิ้นด้วยการติดตั้ง RxJS ตอนนี้ให้เราลองใช้ RxJS เพื่อสร้างโฟลเดอร์src/ ข้างใน rxjsproj/

ตอนนี้เราจะมีโครงสร้างโฟลเดอร์ดังที่แสดงด้านล่าง -

rxjsproj/
   node_modules/
   src/
   package.json

ข้างใน src/ สร้างไฟล์ testrx.jsและเขียนรหัสต่อไปนี้ -

testrx.js

import { of } from 'rxjs;
import { map } from 'rxjs/operators';

map(x => x * x)(of(1, 2, 3)).subscribe((v) => console.log(`Output is: ${v}`));

เมื่อเราไปรันโค้ดด้านบนใน command prompt โดยใช้คำสั่ง - node testrx.jsมันจะแสดงข้อผิดพลาดสำหรับการนำเข้าเนื่องจาก nodejs ไม่รู้ว่าจะทำอย่างไรกับการนำเข้า

ในการทำให้การนำเข้าทำงานกับ nodejs เราจำเป็นต้องติดตั้งแพ็คเกจโมดูล ES6 โดยใช้ npm ดังที่แสดงด้านล่าง -

E:\rxjsproj\src>npm install --save-dev esm
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 1 package from 1 contributor and audited 3 packages in 9.32s
found 0 vulnerabilities

เมื่อติดตั้งแพคเกจแล้วเราสามารถดำเนินการได้ testrx.js ไฟล์ดังรูปด้านล่าง -

E:\rxjsproj\src>node -r esm testrx.js
Output is: 1
Output is: 4
Output is: 9

เราสามารถเห็นผลลัพธ์ได้แล้วซึ่งแสดงว่า RxJS ได้รับการติดตั้งและพร้อมใช้งานแล้ว วิธีการข้างต้นจะช่วยให้เราทดสอบ RxJS ในบรรทัดคำสั่ง ในกรณีที่คุณต้องการทดสอบ RxJS ในเบราว์เซอร์เราจำเป็นต้องมีแพ็คเกจเพิ่มเติม

การทดสอบ RxJS ในเบราว์เซอร์

ติดตั้งแพ็คเกจต่อไปนี้ภายใน rxjsproj / โฟลเดอร์ -

npm install --save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server
E:\rxjsproj>npm install --save-dev babel-loader 
@babel/core @babel/preset-env webpack webpack-cli webpack-dev-server

npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
+ [email protected]
+ @babel/[email protected]
+ @babel/[email protected]
+ [email protected]
+ [email protected]
added 675 packages from 373 contributors and audited 10225 packages in 255.567s
found 0 vulnerabilities

ในการเริ่มต้นเซิร์ฟเวอร์เพื่อรันไฟล์ Html ของเราเราจะใช้ webpack-server คำสั่ง "เผยแพร่" ใน package.json จะช่วยให้เราเริ่มต้นและแพ็คไฟล์ js ทั้งหมดโดยใช้ webpack ไฟล์ js ที่อัดแน่นซึ่งเป็นไฟล์ js สุดท้ายของเราที่จะใช้จะถูกบันทึกไว้ที่โฟลเดอร์path / dev

ในการใช้ webpack เราจำเป็นต้องเรียกใช้ npm run publish คำสั่งและคำสั่งถูกเพิ่มใน package.json ดังที่แสดงด้านล่าง -

Package.json

{
   "name": "rxjsproj",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "publish":"webpack && webpack-dev-server --output-public=/dev/",
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "@babel/core": "^7.6.0",
      "@babel/preset-env": "^7.6.0",
      "babel-loader": "^8.0.6",
      "esm": "^3.2.25",
      "rxjs": "^6.5.3",
      "webpack": "^4.39.3",
      "webpack-cli": "^3.3.8",
      "webpack-dev-server": "^3.8.0"
   }
}

ในการทำงานกับ webpack ก่อนอื่นเราต้องสร้างไฟล์ชื่อ webpack.config.js ที่มีรายละเอียดการกำหนดค่าเพื่อให้ webpack ทำงานได้

รายละเอียดในไฟล์มีดังนี้ -

var path = require('path');

module.exports = {
   entry: {
      app: './src/testrx.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.(js)$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['@babel/preset-env']
            }
         }
      ]
   }
};

โครงสร้างของไฟล์เป็นดังที่แสดงด้านบน เริ่มต้นด้วยเส้นทางที่ให้รายละเอียดเส้นทางปัจจุบัน

var path = require('path'); //gives the current path

ถัดไปคืออ็อบเจ็กต์ module.exports ซึ่งมีรายการคุณสมบัติเอาต์พุตและโมดูล การเข้าเป็นจุดเริ่มต้น ที่นี่เราต้องให้ไฟล์ start js ที่เราต้องการรวบรวม

entry: {
   app: './src/testrx.js'
},

path.resolve (_dirname, 'src / testrx.js') - จะค้นหาโฟลเดอร์ src ในไดเร็กทอรีและ testrx.js ในโฟลเดอร์นั้น

เอาต์พุต

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

ผลลัพธ์คืออ็อบเจ็กต์ที่มี path และ filename details.path จะเก็บโฟลเดอร์ที่จะเก็บไฟล์ที่คอมไพล์ไว้และชื่อไฟล์จะบอกชื่อไฟล์สุดท้ายที่จะใช้ในไฟล์. html ของคุณ

โมดูล

module: {
   rules: [
      {
         test:/\.(js)$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['@babel/preset-env']
         }
      }
   ]
}

Moduleเป็นวัตถุที่มีรายละเอียดกฎซึ่งมีคุณสมบัติเช่นการทดสอบรวมตัวโหลดแบบสอบถาม การทดสอบจะเก็บรายละเอียดของไฟล์ js ทั้งหมดที่ลงท้ายด้วย. js และ. jsx มีรูปแบบซึ่งจะมองหา. js ต่อท้ายในจุดเข้าที่กำหนด

Include บอกโฟลเดอร์ที่จะใช้ในการดูไฟล์

The loader ใช้ babel-loader ในการรวบรวมโค้ด

The queryมีคุณสมบัติที่ตั้งไว้ล่วงหน้าซึ่งเป็นอาร์เรย์ที่มีค่า '@ babel / preset-env' มันจะถ่ายทอดรหัสตามสภาพแวดล้อม ES ที่คุณต้องการ

โครงสร้างโฟลเดอร์สุดท้ายจะเป็นดังนี้ -

rxjsproj/
   node_modules/
   src/
      testrx.js
   index.html
   package.json
   webpack.config.js

เรียกใช้คำสั่ง

npm run publishจะสร้าง dev / โฟลเดอร์ที่มีไฟล์ main_bundle.js อยู่ในนั้น เซิร์ฟเวอร์จะเริ่มทำงานและคุณสามารถทดสอบ index.html ของคุณในเบราว์เซอร์ดังที่แสดงด้านล่าง

เปิดเบราว์เซอร์และกด url - http://localhost:8080/

เอาต์พุตจะแสดงในคอนโซล