[MUSIC]
Bây giờ bạn có Node.js trên máy tính của bạn,
bạn rõ ràng muốn ngay lập tức bắt đầu sử dụng nó.
Vì vậy, trong bài tập này, chúng ta sẽ bắt đầu sử dụng Node.
Chúng tôi sẽ thiết lập một tập tin đóng gói, hoặc liền kề, cho
thư mục thử nghiệm Git của chúng tôi mà chúng tôi đã làm việc với cho đến nay.
Sau đó, chúng tôi sẽ thiết lập một mô-đun nút gọi là lite server
sẽ phục vụ lên nội dung của thư mục thử nghiệm get của chúng tôi.
Và sau đó chúng ta có thể duyệt tệp index.html này và
các tệp khác trong trình duyệt.
Và chúng ta cũng sẽ thấy làm thế nào máy chủ lite sẽ cho phép chúng ta
tự động xem các bản cập nhật cho cửa sổ trình duyệt của chúng tôi khi chúng tôi thực hiện thay đổi
tập tin index.html của chúng tôi, hoặc bất kỳ tập tin nào khác trong thư mục get test của chúng tôi.
Các lite server là một cái gì đó mà chúng tôi sẽ sử dụng rộng rãi trong các
khóa học này và trong tương lai, để có thể nhìn thấy những thay đổi trong thời gian thực
trong một cửa sổ trình duyệt khi bạn chỉnh sửa các tập tin của dự án của bạn.
Như tôi đã đề cập, chúng tôi muốn thiết lập tập tin package.json.
Vì vậy, những gì chính xác là tập tin package.json này mà chúng ta sẽ thiết lập?
Vì vậy, ở đây, tôi có một số thông tin từ
trang web npmjs.org
trong đó xác định chính xác những gì là vai trò của tập tin package.json.
Vì vậy, tập tin package.json phục vụ như
là tài liệu về những gì tất cả các gói khác mà dự án của bạn phụ thuộc vào.
Vì vậy, ví dụ, khi bạn thiết lập máy chủ lite của dự án của bạn,
nó sẽ được ghi lại trong tập tin package.json.
Và do đó, sau đó, bạn cũng có thể sử dụng gói đó trong tương lai.
Ngoài ra, nó cho phép bạn xác định phiên bản cụ thể nào của một gói
mà dự án của bạn phụ thuộc vào.
Vì vậy, ngay cả khi gói mà bạn phụ thuộc vào những thay đổi trong tương lai,
bạn có thể nhấn mạnh rằng bạn muốn người dùng để cài đặt chỉ một
phiên bản cụ thể của gói để sử dụng trong ứng dụng nút của bạn.
Và cũng có thể, nó làm cho bản dựng của bạn có thể tái sản xuất,
có nghĩa là khi bạn chia sẻ mã của bạn với người khác,
sau đó họ cũng có thể cài đặt tất cả các mô-đun nút,
như chúng ta sẽ thấy sau này trong bài tập này, trên máy tính của riêng họ.
Vì vậy, rõ ràng câu hỏi tiếp theo của bạn sẽ là, làm thế nào để chúng tôi tạo ra tập tin package.json này?
Nếu bạn đang bắt đầu một dự án mới mà bạn muốn khởi tạo
tập tin package.json, sau đó chỉ cần gõ npm init tại dấu nhắc trong thư mục dự án.
Và sau đó sẽ đưa bạn qua một tập hợp các bước mà sẽ cho phép
bạn cấu hình tập tin package.json của bạn.
Vì vậy, chúng ta hãy tiếp tục với điều đó cho dự án thử nghiệm Git của chúng tôi.
Vì vậy, ở đây tôi đang ở trong thư mục git-test trong cửa sổ thiết bị đầu cuối của tôi.
Đảm bảo rằng bạn cũng mở một cửa sổ thiết bị đầu cuối hoặc một cửa sổ lệnh và
sau đó đi đến thư mục git-test.
Và tại dấu nhắc, gõ npm init.
Và sau đó làm theo các câu hỏi được hỏi.
Vì vậy, đối với tên của dự án, chúng tôi sẽ chỉ để nó như là mặc định, git-test.
Đối với phiên bản, chúng tôi sẽ chỉ để nó như 1.0.0.
Chúng ta có thể chỉnh sửa nó sau.
Để mô tả,
đây là một thư mục test
để học Git và Node.
Nó không quan trọng, gõ một số mô tả ở đó.
Và sau đó là điểm nhập cảnh, tôi sẽ chỉ nói index.html.
Thông thường nếu nó là một gói nút, điểm nhập sẽ là index.js.
Bây giờ thư mục này mà chúng tôi đã thiết lập là
một thư mục dựa trên index.html, vì vậy đó là lý do tại sao tôi chỉ cần gõ vào index.html.
Kiểm tra lệnh, không có gì.
Kho lưu trữ Git, nếu chúng ta đã thiết lập kho lưu trữ git trong
bài tập trước đó, nó sẽ tự động nhắc rằng cho bạn, nếu không,
điều này sẽ trống rỗng và cung cấp cho bạn một tùy chọn để gõ vào URL kho lưu trữ git,
trong trường hợp bạn đang sử dụng một kho lưu trữ git trực tuyến.
Một số từ khóa cho dự án của bạn, mà tôi sẽ để trống.
Tác giả, hãy nhập tên của bạn.
Hãy tự ái đi.
Và giấy phép.
Và sau đó, nó sẽ cho bạn thấy cấu hình của tập tin package.json ở định dạng JSON.
Vì vậy, nếu gia đình bạn có một JSON, nó trông rất, rất quen thuộc với bạn.
Vì vậy, nếu điều này có vẻ tất cả tốt, chúng ta hãy chỉ nói OK và
sau đó kết quả trong việc tạo ra các tập tin package.json.
Vì vậy, bây giờ nếu bạn liệt kê các nội dung thư mục,
bạn sẽ thấy các tập tin package.json trong nội dung thư mục.
Mở thư mục thử nghiệm Git đó trong trình soạn thảo yêu thích của bạn,
và sau đó xem nội dung của tập tin package.json trong trình soạn thảo của bạn.
Bước tiếp theo, chúng ta sẽ tìm hiểu làm thế nào chúng ta có thể cài đặt một mô-đun nút
sử dụng NPM, Node Package Manager.
Vì vậy, chúng tôi sẽ cài đặt mô-đun nút này được gọi là máy chủ ánh sáng.
Máy chủ ánh sáng sẽ phục vụ nội dung của thư mục git-test này trong
một máy chủ mà nó khởi động để bạn có thể xem nội dung trong một trình duyệt.
Cho rằng chúng tôi có một tập tin index.html,
nếu chúng tôi phục vụ lên thư mục này, sau đó nó sẽ là một trang web.
Và bạn có thể xem index.html trong trình duyệt.
Vì vậy, chúng ta hãy thiết lập máy chủ ánh sáng và sau đó chúng ta sẽ thấy làm thế nào chúng ta có thể
sử dụng máy chủ ánh sáng để phục vụ nội dung của thư mục này.
Điều này rất, rất hữu ích bởi vì nếu bạn đang làm việc trên một
dự án phát triển web, bạn muốn xem phiên bản trực tiếp của dự án phát triển web của bạn.
Vì vậy, khi bạn thực hiện thay đổi dự án của mình,
bạn có thể thấy những thay đổi ngay lập tức được phản ánh trong trình duyệt.
Vì vậy, đây là một gói nút rất tốt rất hữu ích cho mục đích này.
Vì vậy, hãy thiết lập máy chủ ánh sáng này.
Để làm điều đó, hãy thêm dấu nhắc.
Gõ vào cài đặt NPM.
Vì vậy, thông báo, nếu bạn muốn NPM để cài đặt một gói nút,
đây là cách bạn sẽ gọi nó và sau đó bạn sẽ nói lite-server.
Và sau đó, chúng tôi cũng muốn tiết kiệm thực tế là dự án của chúng tôi đang sử dụng máy chủ lite.
Vì vậy, chúng tôi sẽ lưu thông tin này trong tập tin package.json.
Vì vậy, để làm điều đó, bạn sẽ gõ vào — save-dev.
Bây giờ tùy chọn save-dev xác định rằng máy chủ lite này được sử dụng cho
sự phụ thuộc phát triển cho dự án của chúng tôi.
Nếu bạn đang cài đặt một mô-đun nút mà trên đó dự án của bạn là trực tiếp phụ thuộc
vào, sau đó bạn sẽ cài đặt nó bằng cách chỉ đơn giản là nói —save option.
Vì vậy, chúng ta hãy đi trước và cài đặt nó.
Và bạn kiên nhẫn chờ đợi cho quá trình cài đặt diễn ra.
Nó sẽ mất tất cả một vài phút để hoàn tất cài đặt của nó.
Một khi đã được cài đặt, sau đó bạn sẽ ngay lập tức
nhận thấy khi bạn nhìn vào nội dung của thư mục của
bạn, bạn sẽ ngay lập tức nhận thấy rằng có một thư mục có được tạo ra tên node_modules.
Bây giờ, nếu bạn đi vào node_module, bạn sẽ thấy một loạt
các thư mục con khác trong đó, chứa các module nút,
đó là cần thiết cho những người thích mô-đun nút của chúng tôi và vân vân.
Vì vậy, chúng ta hãy có một tour du lịch nhanh chóng của thư mục module nút để xem
những gì nội dung của những là.
Đi đến thư mục git-test của tôi, nếu bạn đang đi đến thư mục module nút,
bạn sẽ thấy, như tôi đã nói, một bó toàn bộ các thư mục con ở đó.
Thông thường bạn không cần phải mạo hiểm vào thư mục module node.
Họ chỉ tồn tại ở đó bởi vì họ là cần thiết cho [không nghe được].
Vì vậy, khi bạn duyệt qua, bạn sẽ nhận thấy một thư mục có tên lite-server ở đây.
Khi bạn đi vào thư mục máy chủ lite-server,
lưu ý đặc biệt sự hiện diện của tệp index.js và
sau đó là tệp package.json của bạn và một số thứ khác.
Vì vậy, nội dung này của thư mục bao gồm mô-đun nút lite-server.
Nhưng mô-đun nút lite-server này phụ thuộc vào các mô-đun nút khác
để cung cấp cho nó một số chức năng bổ sung.
Vì vậy, đó là lý do khi bạn cài đặt mô-đun nút máy chủ ánh sáng, nó sẽ lần lượt
cài đặt nhiều mô-đun nút khác, trên đó máy chủ ánh sáng chính nó phụ thuộc vào.
Vì vậy, đó là lý do tại sao bạn thấy rằng sự bùng nổ của các
thư mục này bên trong các mô-đun nút.
Đừng quá lo lắng về nó, tổng số các thư mục sẽ không được
nhiều hơn một vài chục megabyte.
Vì vậy, nó không phải là sẽ điền vào thư mục của bạn với rác.
Đây là tất cả điều cần thiết cho nút để có thể giúp bạn.
Trong trường hợp bạn tò mò về máy chủ lite-server và nó hoạt động như thế nào,
bạn luôn có thể đi xuống trang GitHub này nơi máy chủ lite-server được lưu trữ.
Và sau đó tìm kiếm tài liệu cho máy chủ lite-server.
Tôi sẽ giới thiệu bạn với bất cứ điều gì bạn cần biết về lite-server khi chúng tôi đi qua khóa học
này và các khóa học còn lại.
Vì vậy, bạn không cần phải lo lắng quá nhiều về nó, nhưng chỉ trong trường hợp bạn tò mò,
bạn luôn có thể truy cập trang web để tìm hiểu thêm chi tiết về lite-server.
Liên kết được cung cấp trong hướng dẫn tập thể dục của bạn và
các tài nguyên bổ sung là một phần của bài học này.
Một khi bạn đã hoàn thành điều đó, sau đó đi qua.
Trình soạn thảo nơi bạn có thư mục, thư mục Git-Test, mở ra và
sau đó xem nội dung của tệp package.json.
Vì vậy, bạn sẽ thấy rằng các tập tin package.json chứa chính xác các thông tin mà
bạn cấu hình với NPM của bạn.
Vì vậy, bạn sẽ thấy phiên bản tên và tác giả kho lưu trữ và
đặc biệt, lưu ý thông tin này ở đây.
Nó nói DevDependencies, vì vậy sau đó nó chỉ định lite-sever,
và cũng nhận thấy nó nói hat 2.2.2.
Vì vậy, có nghĩa là dự án đặc biệt này
phụ thuộc vào lite-server đó là một phiên bản ít nhất 2.2.2 hoặc cao hơn.
Vì vậy, điều này rất hữu ích cho chúng tôi.
Bây giờ tại sao chúng ta cần thông tin này ở đây?
Sau đó, khi bạn đi đến các bài tập khác,
bạn sẽ nhận thấy rằng khi bạn lưu trữ này trên một kho lưu trữ trực tuyến,
bạn không muốn được lưu trữ tất cả mọi thứ trong thư mục mô-đun nút của bạn.
Bạn sẽ chỉ được lưu trữ thông tin của tất cả các tập tin mà chúng tôi đã tạo ra.
Thư mục module nút luôn có thể được tạo lại bằng cách
gõ NPM install tại dấu nhắc lệnh của chúng tôi.
Và sau đó dựa trên các phụ thuộc dev và
phụ thuộc được liệt kê trong tập tin packager, tất cả các
mô-đun nút mà dự án của bạn phụ thuộc vào sẽ tự động được cài đặt.
Chúng ta sẽ thấy rằng sau này về cách sử dụng
cài đặt NPM trong khóa học này.
Bây giờ chúng ta đang ở tập tin package.json chúng ta hãy thực hiện một vài chỉnh sửa
để chúng ta có thể sử dụng lite-server để phục vụ nội dung đó.
Vì vậy, ngay tại đây, trong tùy chọn này được gọi là kịch bản,
chúng ta hãy thêm vào một ở đây.
Vì vậy, chúng tôi sẽ nói “bắt đầu”.
Vì vậy, bắt đầu là một lệnh mà NPM hỗ trợ cho
phép bạn xác định một loạt các điều sẽ được bắt đầu.
Vì vậy, sau này chúng ta sẽ thấy làm thế nào chúng ta sử dụng nó.
Vì vậy, ở đây tôi sẽ nói “npm chạy lite”.
Và sau bài kiểm tra đó, tôi sẽ thêm
vào một mục khác gọi là “lite”,
mà tôi sẽ cấu hình là “lite-server”, okay?
Với những thay đổi này, hãy lưu tệp package.json.
Và sau đó, bây giờ dự án của chúng tôi được cấu hình, do đó bây giờ nếu bạn khởi động máy chủ Lite-,
nội dung của thư mục của bạn sẽ được phục vụ trong trình duyệt yêu thích của bạn.
Quay lại dấu nhắc lệnh của chúng tôi, thêm dấu nhắc.
Nếu tôi gõ, npm bắt đầu, bây giờ bạn thấy lý do tại sao tôi đặt rằng
thẻ nhập cảnh bắt đầu vào tập tin package.json của tôi.
Nếu tôi nói npm bắt đầu, bất cứ điều gì bắt đầu được cấu hình như trong tập tin package.json,
chúng tôi chỉ định rằng npm chạy ánh sáng, và lite đã được chỉ định như máy chủ lite.
Vì vậy, về cơ bản, chúng tôi đang nói Bắt đầu lite-server.
Vì vậy, một khi tôi gõ npm start, nó sẽ bắt đầu lite-server, và
nó sẽ phục vụ lên nội dung của thư mục này.
Bây giờ làm thế nào để bạn truy cập vào nội dung của thư mục này?
Nếu bạn muốn truy cập vào địa phương này,
bạn sẽ truy cập nó bằng cách xác định bạn là localhost:3000.
Đây là các cài đặt mặc định cho máy chủ lite-server.
Hơn nữa, điều này sẽ tự động mở
cửa sổ trình duyệt của trình duyệt mặc định của bạn, và
hiển thị nội dung của chỉ mục hoặc HTML trong cửa sổ trình duyệt.
Ở đây bạn có thể thấy rằng tôi đã mở trình soạn thảo của
tôi và cửa sổ trình duyệt của tôi hướng vào localhost:3000
đồng thời cạnh nhau, để chúng ta có thể thấy
cách cửa sổ trình duyệt sẽ ngay lập tức phản ánh
bất kỳ thay đổi nào mà chúng tôi thực hiện đối với thư mục thử nghiệm Git của chúng tôi.
Vì vậy, hãy để tôi đi đến index.html.
Và sau đó vì lợi ích của không gian, tôi sẽ chuyển nó lại.
Và sau đó, ở đây, bạn có thể thấy rằng đây là nội dung của điều này.
Và rồi, bây giờ, hãy để tôi thêm vào một đoạn nữa.
Và lưu các thay đổi, và sau đó bạn sẽ ngay lập tức nhận thấy rằng
sự thay đổi mà tôi đã thực hiện đối với tệp index.html của tôi được phản ánh vào trình duyệt của tôi.
Điều này cung cấp một cách rất tốt đẹp để có thể quan sát trong
thời gian thực các thay đổi mà bạn thực hiện cho mã của bạn được phản ánh vào trình duyệt của bạn.
Vì vậy, khi bạn đang làm việc trên một dự án, nó sẽ rất thích hợp cho
bạn để có thể xem các thay đổi ngay lập tức.
Vì vậy, khi bạn thực hiện một thay đổi và sau đó lưu các tập tin,
mã sửa đổi được ngay lập tức tải vào trình duyệt của bạn.
Vì vậy, bạn có thể ngay lập tức nhìn thấy sự thay đổi được phản ánh trong cửa sổ trình duyệt của bạn.
Đây là một công cụ rất hữu ích trong khi bạn đang phát triển dự án của bạn.
Đó là lý do tại sao tôi giới thiệu bạn với máy chủ lite-server đó, và
thiết lập nó để chúng tôi có thể sử dụng nó, khi chúng tôi phát triển trang web trong khóa học này.
Nếu bạn nhớ lại, chúng tôi đã thiết lập thư mục git-test của chúng tôi để trở thành một kho lưu trữ Git.
Vì vậy, Kiểm tra một lần nữa, Chúng ta
sẽ thấy rằng chúng ta đã có ba cam kết trong kho lưu trữ Git của chúng tôi.
Và kho lưu trữ Git này đã được nhân đôi vào kho lưu trữ Git trực tuyến của
chúng tôi mà chúng tôi đã thiết lập trong bài tập trước đó tại Bitbucket hoặc GitHub.
Thư mục git-test của tôi được đồng bộ hóa với
kho lưu trữ Bitbucket của tôi trong bài tập cụ thể này.
Vì vậy, những gì tôi sẽ làm bây giờ là để cho bạn thấy làm thế nào bạn có thể loại trừ một số
thư mục từ thư mục dự án của bạn,
và sau đó đảm bảo rằng chúng không được đồng bộ hóa với kho lưu trữ trực tuyến của bạn.
Bây giờ như tôi đã nói, thư mục node_modules luôn có thể được tạo lại
bằng cách gõ npm install tại dấu nhắc.
Vì vậy, đó là lý do tại sao khi bạn tải
nội dung của thư mục của bạn lên một kho Git trực tuyến,
hoặc khi bạn thực hiện một cam kết của thư mục vào kho Git của
bạn, bạn không muốn thư mục node_modules hoặc tất cả các thư mục con dưới nó được
bao gồm trong cam kết.
Vậy làm thế nào để chúng tôi loại trừ một số thư mục hoặc
một số tệp từ thư mục của chúng tôi khỏi được kiểm tra vào kho lưu trữ Git của chúng tôi?
Vì vậy, để làm điều đó, chúng ta sẽ thiết lập một tập tin có tên là .gitignore.
Vì vậy, đó là tên của tập tin, .gitignore.
Vì vậy, để tạo tập tin .gitignore này, chúng tôi sẽ đi đến trình soạn thảo của chúng tôi.
Vì vậy, trong trình soạn thảo, trong thư mục git-test,
tôi sẽ tạo một tệp mới và tôi sẽ đặt tên nó là .gitignore.
Lưu ý rằng tên bắt đầu bằng dấu chấm và
sau đó, phần còn lại của tên là g-i-t-i-g-n-o-r-e.
Vì vậy, điều này là rất quan trọng mà bạn thiết lập các tập tin với chính xác tên đó,
.gitignore.
Vì vậy, chúng ta hãy tạo tập tin này được gọi là .gitignore, và
dòng đầu tiên của tập tin đó, chúng ta sẽ gõ như node_modules.
Vì vậy, những gì điều này có nghĩa là thư mục node_modules sẽ được
loại trừ khỏi cam kết git của chúng tôi.
Vì vậy, một khi tôi tạo ra tệp.gitignore
đó và sau đó thêm node_modules vào tệp.gitignore, chúng ta hãy lưu các thay đổi.
Và sau đó bây giờ chúng ta sẽ thực hiện một cam kết của trạng thái hiện tại của dự án của chúng tôi
vào kho lưu trữ Git của chúng tôi.
Tôi hy vọng bạn nhớ lệnh git của bạn.
Hãy làm một trạng thái git, và sau đó khi bạn làm điều đó,
bạn sẽ ngay lập tức nhận thấy rằng bạn có các
tập tin index.html được đánh dấu là sửa đổi, và sau đó là hai tập tin mới, .gitignore và package.json.
Vì vậy, chúng tôi làm một git add., và sau đó làm một trạng thái git.
Và sau đó bạn thấy rằng tất cả các tập tin mới này đã được kiểm tra vào cam kết của bạn.
Hãy làm một git. git commit -m “fourth commit”.
Và các tập tin được cam kết.
Hãy đẩy cam kết mới vào kho lưu trữ trực tuyến của chúng tôi.
Vì vậy, để làm điều đó git push -u
gốc chủ và chờ cho
nó được đẩy đến máy chủ của chúng tôi.
Bây giờ, nếu bạn đi đến kho lưu trữ Git trực tuyến của
bạn, bạn sẽ thấy rằng tệp package.json và
.gitignore sẽ được kiểm nhập vào kho lưu trữ Git của bạn.
Đi đến kho lưu trữ Bitbucket của tôi từ bài kiểm tra Git, bạn sẽ thấy rằng
khi tôi nhìn vào nguồn, bạn sẽ thấy rằng tập tin package.json đã được thêm vào.
.gitignore đã được thêm vào và tệp index.html mới đã được kiểm nhập.
Vì vậy, điều đó hoàn thành bài tập này.
Vì vậy, trong bài tập này,
chúng tôi đã học được cách thiết lập một tập tin package.json bằng cách sử dụng npm init.
Chúng tôi đã học được cách cài đặt một mô-đun npm.
Và chúng tôi đã học được cách sử dụng mô-đun npm lite-server để phục vụ
nội dung của thư mục dự án của chúng tôi để nó có thể được xem trong một trình duyệt.
Vì vậy, đây là một cách tốt đẹp để phục vụ nội dung web của bạn,
ứng dụng web của bạn hoặc trang web của bạn, để
bạn có thể thấy những thay đổi trong thời gian thực được phản ánh vào cửa sổ trình duyệt của bạn.
Và sau đó chúng ta cũng thấy làm thế nào chúng ta có thể thiết lập .gitignore để một số
thư mục có thể bị loại trừ khỏi việc được kiểm tra vào kho lưu trữ Git của chúng tôi.
Điều này hoàn thành bài tập này.
Vì vậy, với điều này, tôi chắc chắn bạn đã nhận được một xử lý tốt về
việc sử dụng cả hai Git, và sau đó cũng nút và nút module.
Đừng lo lắng, chúng tôi sẽ sử dụng nút một cách rộng rãi, theo nhiều cách khác nhau,
khi bạn đi qua các khóa học chuyên môn này.
Đây chỉ là một khởi đầu.
[ NHẠC]