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/
เอาต์พุตจะแสดงในคอนโซล