[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 package.json cho
thư mục git-test 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 Node gọi là lite-server
sẽ phục vụ nội dung của thư mục git-test 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 cách máy chủ lite-server sẽ cho phép
chúng tôi 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 index.html của chúng tôi hoặc
bất kỳ tệp nào khác trong thư mục git-test của chúng tôi.
Lite-server là một cái gì đó 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ể xem 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 lite-server cho
dự án của bạn, nó sẽ được ghi lại trong tập tin package.json.
Vì vậy, 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 Node của bạn.
Và nó cũng 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 Node,
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, nơi 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ến hành điều đó cho dự án git-test 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 thử nghiệm
để 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 Node, đ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 điều đó cho bạn.
Nếu không, điều này sẽ trống và cung cấp cho bạn một tùy chọn để nhập
URL kho 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.
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 bạn đã quen thuộc với JSON, điều này sẽ 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, chúng ta hãy nói là ổn.
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 git-test 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 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 cách chúng ta có thể cài đặt
một mô-đun Node bằ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à lite-server.
Lite-server 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 một trình duyệt.
Vì vậy, chúng ta hãy thiết lập lite-server và sau đó chúng ta sẽ thấy làm thế nào chúng ta có thể
sử dụng lite-server để phục vụ lên nội dung của thư mục này.
Điều này rất, rất hữu ích 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
để 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 phản ánh trong trình duyệt.
Vì vậy, đây là một gói Node rất tốt rất hữu ích cho mục đích này.
Vì vậy, hãy thiết lập lite-server.
Để làm điều đó tại dấu nhắc, hãy nhập 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 Node,
đâ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 lite-server.
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 đó, chúng ta sẽ gõ vào —save-dev.
Bây giờ tùy chọn save-dev xác định rằng lite-server 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 Node 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 đơn giản 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_modules bạn sẽ thấy một bó toàn bộ
các thư mục con khác trong đó có chứa
các module nút cần thiết cho mô-đun nút lite-sever và vân vân.
Vì vậy, chúng ta hãy tham quan nhanh chóng của thư mục node_modules để xem
nội dung của những gì là.
Đi đến thư mục git-test của tôi, nếu bạn đang đi đến thư mục node_modules,
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 kết xuất vào thư mục node_modules,
chúng chỉ tồn tại ở đó bởi vì chúng là cần thiết cho lite-server.
Vì vậy, khi bạn duyệt qua bạn, nên một thư mục thông báo 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à một tệp package.json 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ủ lite-server, nó sẽ lần lượt
cài đặt nhiều mô-đun nút khác mà trên đó chính máy chủ lite-server là 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
những thư mục bên trong thư mục node_modules.
Đừng quá lo lắng về nó, tổng số tiền của tất cả điều này sẽ không được nhiều hơn
một vài chục megabyte.
Vì vậy, nó sẽ không để đ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à làm thế nào nó hoạt động và vân vân.
Bạn luôn có thể đi xuống trang web GitHub này nơi máy chủ lite-được đăng và
sau đó tìm kiếm tài liệu cho 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 này để 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à
một phần tài nguyên bổ sung của bài học này.
Một khi bạn đã hoàn thành điều đó, sau đó đi đến trình soạn thảo,
nơi bạn có thư mục, thư mục git-test, mở và
sau đó xem nội dung của tập tin 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 trong đó.
Vì vậy, bạn sẽ thấy tên, phiên bản và tác giả kho lưu trữ,
và đặc biệt, lưu ý thông tin này ở đây nói DevDependencies.
Và sau đó nó chỉ định lite-server, và cũng nhận thấy nó nói, ^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.
Tất cả các cấp độ cao.
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 lưu trữ tất cả mọi thứ trong thư mục node_modules của bạn.
Chúng tôi sẽ chỉ 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 node_modules luôn có thể được tạo lại bằng cách
gõ nmp install tại dấu nhắc lệnh của chúng tôi.
Và sau đó dựa trên DevDependen
cies và phụ thuộc được liệt kê trong tập tin package.json.
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ờ, 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 cái nữa ở đâ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 hỗ trợ npm
cho phép bạn chỉ định một loạt những đ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ẽ sử dụng nó.
Vì vậy, ở đây, tôi sẽ nói, npm chạy lite.
Và sau khi thử nghiệm, tôi sẽ
thêm vào một mục khác được gọi là,
lite mà tôi sẽ cấu hình như lite-server.
Được rồi, với những thay đổi này, chúng ta 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.
Vì vậy, bây giờ, nếu bạn khởi động máy chủ lite-server,
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 và 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 mục nhập đó gọi là bắt đầu vào tập tin package.json của tôi.
Vì vậy, 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 như npm chạy lite, và sau đó lite đã được chỉ định như lite-server.
Vì vậy, về cơ bản, chúng ta đang nói bắt đầu lite-server.
Vì vậy, một khi tôi gõ, npm bắt đầu, 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 nó cục bộ, bạn sẽ truy cập nó bằng cách
chỉ định URL như localhost:3000.
Đây là 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à
sau đó hiển thị nội dung của index.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 song song.
Vì vậy, 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 các tệp của chúng tôi trong thư mục git-test.
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à rồi ở đây bạn có thể thấy rằng đây là nội dung của điều này.
Và bây giờ hãy để tôi thêm vào
một đoạn nữa,
Và lưu lại những 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,
những 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à lưu các tập tin,
mã sửa đổi được tải ngay lập tức vào trình duyệt của bạn để
bạn có thể ngay lập tức thấy 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 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 là một kho lưu trữ git,
để kiểm tra lại, chúng tôi
sẽ thấy rằng chúng tôi đã 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 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 đó, hoặ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 module nút luôn có thể được tạo lại
bằng cách gõ npminstall 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 module ghi chú hoặc tất cả các thư mục con
dưới nó được bao gồm trong, Commit.
Vì 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 tin từ thư mục của chúng tôi từ đượ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 ra 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
rất, rất quan trọng là bạn thiết lập fille 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 module node 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 rằng tập tin .gitignore và
sau đó thêm mô-đun nút vào tập tin .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 đã được kiểm tra vào cam kết của bạn.
Hãy làm một git commit, 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 master.
Và chờ cho nó được đẩy vào 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 tin 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 cho git-test.
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 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 phút.
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 máy chủ lite để 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 của bạn,
ứng dụng web của bạn hoặc trang web của bạn để
bạn có thể nhìn 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 tôi cũng đã thấy làm thế nào họ có thể thiết lập .gitignore để một số
thư mục có thể được loại trừ khỏi đượ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 sẽ có được một xử lý tốt về
việc sử dụng cả git và sau đó cũng nút và nút module.
Đừng lo.
Chúng tôi sẽ sử dụng nút 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]