Cách kiểm tra javascript

Mã kiểm tra là một giai đoạn thiết yếu của phát triển web (đặc biệt là đối với NodeJS). Nó giúp mã của bạn không gặp lỗi và chắc chắn rằng nó hoạt động trên tất cả các thiết bị. Nhưng việc test code có thể tốn nhiều thời gian và phức tạp, đặc biệt nếu bạn là người mới bắt đầu

Một số kiểm tra thông thường như linting và minifying có thể tự động hóa. Giúp bạn sửa các biến lỗi phổ biến và gắn cờ các lỗi trong mã dễ dàng hơn bao giờ hết. Điều này giúp bạn tiết kiệm rất nhiều thời gian khi làm bài thi

vải lót. quá trình chạy một chương trình sẽ phân tích mã cho các lỗi ẩn

rút gọn. quy trình xóa tất cả các ký tự không cần thiết từ mã nguồn của ngôn ngữ lập trình đã được thông dịch hoặc ngôn ngữ đánh dấu mà không làm thay đổi chức năng của nó

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thiết lập chương trình chạy tác vụ với NodeJS và npm để tự động hóa 3 quy trình

1. HTML Linting và Minifying. sửa lỗi và định dạng sai
2. CSS Autoprefixing và Linting. thêm tiền tố để chạy trong các trình duyệt cũ hơn và sửa lỗi
3. JavaScript Linting và Transpiling. đã sửa lỗi và chuyển mã JS để hoạt động trong các trình duyệt cũ hơn

Bước 1. Tải NodeJS và npm

Tải NodeJS (với npm) bằng câu lệnh sau

sudo apt install nodejs

Sau khi cài đặt, hãy kiểm tra bằng câu lệnh sau

node -v
npm -v

Bước 2. Cài đặt Gulp (công cụ để kiểm tra)

Gulp là một bộ công cụ tự động sẽ được sử dụng để tạo các tác vụ chạy chương trình để kiểm tra (xem tài liệu). Bạn có thể cài đặt nó qua npm bằng cách chạy dòng sau

npm install --global gulp-cli

Sau khi khởi động npm, một gói tên tệp. json sẽ được tạo trong thư mục dự án NodeJS của bạn

Bước 3. Tạo dự án và khởi tạo NPM

To create project after that move to project and start NPM

mkdir test-project
cd test-project
npm init

Bước 4. Gulp setting

npm install --save-dev gulp

Bây giờ bạn sẽ thấy một ngụm trong gói. json của mình trong thuộc tính devDependencies

Bước 5. Tạo tập tin gulpfile. js

Trong thư mục project NodeJS, hãy tạo filegulpfile. js, nơi chúng ta sẽ viết trình chạy nhiệm vụ của mình vào và thêm phần sau vào dòng đầu tiên

const gulp = require('gulp');

Bây giờ, hãy tạo 3 nhiệm vụ kiểm tra tự động bắt đầu từ html, css và sau đó là JavaScript

Bước 6. Create task for ‘html’

Hãy bắt đầu với việc tạo tác vụ html với gulp-htmltidy, plugin gulp cho HTML linting. Xem tài liệu

Đầu tiên, chúng ta cài đặt nó với

npm install --save-dev gulp-htmltidy

Sau đó, thêm phần phụ thuộc (phụ thuộc) vào gulpfile. js

const htmltidy = require('gulp-htmltidy');

Thêm bài kiểm tra sau đây để kiểm tra lỗi trong tệp html của bạn

________số 8_______

Tuyệt quá. chúng tôi đã tạo bài kiểm tra đầu tiên để kiểm tra lỗi và định dạng kém trong HTML. Please transfer to create CSS check

Bước 7. Create task for ‘css’

Cài đặt gulp-autoprefixer (tài liệu) và gulp-csslint (tài liệu) bằng câu lệnh

npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-csslint

Sau đó, giống như đối với htmltidy, chúng ta thêm phụ thuộc (phụ thuộc) vào đầu gulpfile. js

node -v
npm -v

0

Cuối cùng, thêm nhiệm vụ css bên dưới nhiệm vụ html như sau

node -v
npm -v

1

Bây giờ, chúng ta đã có đoạn kiểm tra css

Bước 8. Tạo thử nghiệm cho JS

Đối với JavaScript thử nghiệm, chúng ta sẽ cài đặt gulp-jshint (tài liệu) và gulp-babel (tài liệu) bằng cách chạy câu lệnh sau

node -v
npm -v

2

Sau đó, lần cuối cùng, Thêm phụ thuộc vào

node -v
npm -v

3

And task at the end gulpfile. js

node -v
npm -v

4

Được rồi, tất cả chúng tôi đã viết cả 3 nhiệm vụ. Chúng tôi đã hoàn tất việc thiết lập các bài kiểm tra của mình bằng cách sử dụng gulp. Babel sẽ chuyển mã của chúng tôi sang cú pháp cũ để hoạt động trên trình duyệt cũ hơn trong khi 

node -v
npm -v

9 sẽ kiểm tra lỗi trong mã của chúng tôi. kiểm tra

Được rồi, chúng ta đã viết xong bài kiểm tra 3 đoạn. And also setting the complete the test by how to use gulp. Babel sẽ chuyển đổi mã sang cú pháp cũ để hoạt động trên trình duyệt cũ hơn trong khi gulp-jshint sẽ kiểm tra lỗi trong mã

Bước 9. In the last task

The end, at the end gulpfile. js, thêm đoạn sau

node -v
npm -v

5

To we could run the clock both 3 test with NodeJS

Tập tin Gulpfile. js last will same as after

node -v
npm -v

6

Còn gói tệp. json sẽ trông giống như sau

node -v
npm -v

7

chạy thử nghiệm

Gõ lệnh gulp như hình bên dưới để kiểm tra chạy tự động

Có vẻ như tôi gặp rất nhiều lỗi chủ yếu liên quan đến việc sử dụng cú pháp JavaScript mới sẽ không hoạt động trên các trình duyệt cũ hơn. Nếu tôi nhìn vào thư mục 'bản dựng', có thể thấy các tệp HTML, CSS và JS mới được định dạng đã được chỉnh sửa bằng cách chạy thử nghiệm

Bước tiếp theo

Xin chúc mừng, bạn đã học được cách thiết lập test html, css và JavaScript tự động bằng NodeJS, npm và gulp. Có nhiều thứ để kiểm tra hơn là xơ vải và thu nhỏ, vì vậy tôi khuyến mãi bạn tự học thêm. Đối với công cụ kiểm tra này, bạn có thể thực hiện thêm bằng cách bổ sung

node -v
npm -v

8

vào gulpfile. js để kiểm tra sẽ được chạy bất cứ khi nào bạn lưu tệp (xem tài liệu )

Tôi hy vọng điều này sẽ hữu ích cho bạn

Kết luận

Qua bài viết bạn đã biết cách kiểm tra mã rõ ràng. Giúp bạn có thể phát triển ứng dụng, web hoặc bất cứ điều gì bạn muốn