Tối thiểu trong javascript

Question

Đây là bài dịch, bài gốc mời các bạn xem ở đây. https. //Trung bình. com/the-node-js-collection/Modern-javascript-explained-for-dinosaurs-f695e9747b70

Nội dung chính Show

Sử dụng Javascript theo cách "cổ điển"
Sử dụng bộ quản lý gói Javascript (npm)
Sử dụng công cụ đóng gói (gói) mô-đun Javascript (webpack)
Các chức năng biến đổi code sang ngôn ngữ mới (babel)
Use a task running - task runner (use npm scripts)
Tổng kết

Bây giờ, việc học Javascript sẽ rất thú vị nếu như bạn không theo dõi từ sự bùng nổ và phát triển của JS trong những năm gần đây. Hệ sinh thái của JS hiện vẫn đang tiếp tục phát triển và thay đổi một cách nhanh chóng, tạo ra sự hiểu biết và lựa chọn công cụ phù hợp cho vấn đề cần giải quyết trở nên thực sự khó khăn. Tôi bắt đầu lập trình từ năm 1998 nhưng chỉ mới học Javascript một cách nghiêm trọng kể từ năm 2014. Vào thời điểm đó, tôi nhớ mình đã tiếp cận Browserify và nhìn chằm chằm vào định nghĩa của nó như sau

$ npm init

8

Thú thực là tôi không hiểu bất cứ từ nào trong câu văn trên, và cũng hoàn toàn không hiểu được công dụng của Browserify sẽ giúp tôi thế nào trong việc lập trình JS

Do đó, bài viết này ra đời với mục tiêu là cung cấp cho người đọc một bối cảnh lịch sử về các công cụ JS đã tiến hóa như thế nào đến thời điểm năm 2017. Chúng ta sẽ bắt đầu bằng việc xây dựng một trang web ví dụ như những con khủng long - không có công cụ gì cả, chỉ sử dụng HTML thuần túy và Javascript. Sau đó chúng ta sẽ lần lượt xem xét điểm qua và dần dần áp dụng các công cụ để biết vấn đề mà chúng ta sẽ giải quyết được là gì. Với bối cảnh lịch sử này, bạn sẽ có khả năng học tập và trả lời tốt hơn với sự thay đổi của Javascript ở thời điểm hiện tại và trong cả tương lai nữa. Please start any same

Sử dụng Javascript theo cách "cổ điển"

Hãy bắt đầu với một trang web theo phong cách "cổ điển" chỉ với HTML và Javascript, bao gồm cả việc tải xuống và liên kết các tệp một cách thủ công. This is a file index. html menu đơn giản sử dụng một tệp Javascript


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

Đoạn

$ npm init

9 sẽ trỏ đến một tệp JS riêng biệt nằm trong cùng 1 thư mục có tên là chỉ mục. js

// index.js
console.log("Hello from JavaScript!");

Và đây là tất cả những gì bạn cần để thực hiện một trang web. Giờ xem nếu bạn muốn thêm một thư viện được viết bởi người khác ví dụ như là khoảnh khắc. js (một thư viện có thể giúp bạn định dạng giá trị ngày tháng theo cách con người thường đọc). Lấy ví dụ, bạn có thể sử dụng hàm

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

0 như sau

moment().startOf('day').fromNow();        // 20 hours ago

Nhưng công việc này chỉ có thể thực hiện được nếu bạn đã thêm tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1 vào trang web của mình. Trong trang chủ của khoảnh khắc. js bạn sẽ thấy hướng dẫn như sau

Hmm, có vẻ như có nhiều thứ trong phần Install ở bên tay phải. Nhưng tạm thời chúng ta bỏ qua nó đã có - chúng ta có thể thêm

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1 vào trang web của chúng ta bằng cách tải xuống tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3 vào cùng một thư mục với tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4 và chỉnh sửa như sau


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

0

Lưu ý rằng file

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

5 được load trước file

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6, có nghĩa là chúng ta có thể sử dụng hàm

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

0 trong file

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6 như thế này


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

5

Và đó là cách chúng ta sử dụng để làm trang web với các thư viện Javascript. Phần tốt ở đây là nó rất đủ dễ hiểu. Phần không tốt là nó sẽ trở nên rất khó chịu để tìm và tải xuống các phiên bản mới của thư viện JS mỗi khi chúng được cập nhật

Sử dụng bộ quản lý gói Javascript (npm)

Bắt đầu vào khoảng năm 2010, một vài bộ quản lý gói JS khá cạnh tranh đã được nhiều người biết đến, với mục đích giúp lập trình viên thuận tiện hơn trong việc tải xuống và nâng cấp các thư viện từ một kho lưu trữ tập trung. Bower được cho rằng là công cụ phổ biến nhất vào năm 2013, nhưng sau đó đã bị npm soán ngôi vào năm 2015. (Một công cụ khác cũng đáng được nhắc tới, được ra đời vào năm 2016, đó là sợi, đã thu hút rất nhiều sự chú ý dưới danh nghĩa là ứng viên thay thế cho giao diện của npm, nhưng vẫn sử dụng các gói npm ở đó

Lưu ý rằng npm ban đầu là một chương trình quản lý các gói được tạo ra chuyên cho nút. js, a compile compile and running JavaScript used for side server, chứ không phải là side frontend. Vì thế việc sử dụng một thư viện như npm để quản lý các thư viện Javascript ở phía trước nghe có vẻ hơi kỳ cục

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

9

Hãy cùng xem cách sử dụng npm để cài đặt thư viện

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1 một cách tự động thay vì tải xuống thủ công. Nếu như bạn đã cài đặt


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

81, thì bạn cũng đã cài đặt đồng thời


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

82, và vì thế bạn có thể chuyển đến thư mục chứa tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4 và nhập dòng sau

$ npm init

Sau khi trả lời một số câu hỏi (các tùy chọn mặc định khá ổn, bạn có thể nhấn Enter để chọn giá trị mặc định), câu lệnh trên sẽ tạo ra một tệp có tên là


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

84. Đây là một tệp cấu hình được npm sử dụng để lưu tất cả thông tin dự án. Với giá trị mặc định, tệp ________ 184 sẽ trông giống như thế này

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Để cài đặt

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1, chúng ta có thể sử dụng hướng dẫn cài đặt từ trang chủ bằng cách nhập dòng lệnh sau


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

8

Câu lệnh này sẽ thực hiện 2 công việc - đầu tiên, nó tải xuống tất cả mã từ gói của thời điểm. js vào một thư mục có tên là


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

87. Tiếp theo, nó sẽ cập nhật tệp


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

84 để bổ sung thư viện

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1 và theo dõi thông tin cập nhật của thư viện dưới vai trò trò chơi phụ thuộc của dự án hiện tại

// index.js
console.log("Hello from JavaScript!");

0

Việc này sẽ giúp ích khi chia sẻ dự án với người khác - thay vì chia sẻ thư mục


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

87 (có thể trở nên rất nghiêm trọng), bạn chỉ cần chia sẻ tệp


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

84 và những thành viên lập trình khác có thể cài đặt các gói này

Và giờ chúng ta không cần phải tải xuống tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

1 thủ công nữa, mà có thể tự động tải xuống và cập nhật chúng thông qua npm. Nhìn vào bên trong thư mục


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

87, chúng ta có thể thấy tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

5 nằm trong thư mục

// index.js
console.log("Hello from JavaScript!");

06. Điều này có nghĩa là chúng ta có thể liên kết đến tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

5 đã được tải xuống trong tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4 như sau

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

0

Điều tốt ở đây là chúng ta có thể sử dụng npm để tải xuống và cập nhật các gói cần thiết thông qua dòng lệnh. Điều không ổn ở đây là chúng ta phải đào sâu vào thư mục


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

87 để tìm vị trí tìm kiếm của từng gói và thêm chúng một cách thủ công vào tệp HTML. Việc làm này khá bất tiện, và vì thế tiếp theo chúng ta sẽ tìm cách tự động hóa quá trình đó luôn

Sử dụng công cụ đóng gói (gói) mô-đun Javascript (webpack)

Rất nhiều ngôn ngữ lập trình cung cấp một cách để nhập mã từ tệp này sang tệp khác. Javascript ban đầu không được thiết kế để có tính năng này, vì JS được tạo ra với mục đích chỉ chạy trên trình duyệt, mà không có quyền truy cập vào các tệp hệ thống nằm trên máy tính của người sử dụng (vì lý do làm . Vì thế trong thời gian dài, mã Javascript tổ chức đã từng được thực hiện bằng cách tải từng tệp một vào các biến chia sẻ toàn cục (toàn cầu)

Và những cái ở trên thực ra cũng là cách mà chúng ta đang sử dụng với ví dụ về khoảnh khắc. js - toàn bộ tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

5 được tải vào trong tệp HTML, được định nghĩa bởi một biến toàn cục có tên là

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

0, và có thể được sử dụng ở bất kỳ tệp nào được tải sau khi tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

5 được tải (tất cả đều có hoặc không cần thiết

Vào năm 2009, một dự án có tên là CommonJS đã được bắt đầu với mục đích là định nghĩa ra một hệ sinh thái cho Javascript mà không phụ thuộc vào trình duyệt web. Một kết quả khá lớn của dự án đã được đưa ra được xác định đặc điểm mô tả về các mô-đun, cho phép Javascript được nhập và xuất mã giữa các tệp giống như các ngôn ngữ lập trình khác, mà không cần thiết phải sử dụng toàn bộ biến . And node. js là phần triển khai các mô-đun của CommonJS nổi tiếng nhất

As description at on, node. js là một biên dịch và thực thi Javascript được thiết kế để có thể chạy trên máy chủ. Thay vì phải tải toàn bộ tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

5 với tập lệnh thẻ, chúng ta có thể tải nó trực tiếp trong mã JS giống như dưới đây

// index.js
console.log("Hello from JavaScript!");

0

Một lần nữa, đây là cách mà mô-đun được tải trong nút. js và nó đã hoạt động khá tốt kể từ khi nút. js được sử dụng dưới dạng ngôn ngữ phía máy chủ với khả năng truy cập vào các tệp hệ thống trên máy tính. Nút. js cũng biết vị trí đường dẫn của từng mô-đun npm, vì thay vì phải viết

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

04, bạn chỉ cần viết đơn giản là

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

05 - khá ngọt

Điều này rất tuyệt với nút. js, nhưng nếu bạn thử đoạn mã trên trong quá trình duyệt, bạn sẽ gặp lỗi với mô tả

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 chưa được định nghĩa. Trình duyệt không truy cập được vào hệ thống tệp, nên việc tải mô-đun theo cách này sẽ rất rắc rối - các tệp phải được tải động, bằng cách đồng bộ (sẽ làm chậm quá trình thực thi) hoặc bất đồng bộ (có

Và đây là lúc mà module bundler (module đóng gói) phát huy tác dụng. Javascript module bundler là một công cụ giúp bạn thoát khỏi vấn đề ở trên với một bước xây dựng (có quyền truy cập vào tệp hệ thống) và tạo ra kết quả cuối cùng tương thích với trình duyệt (không cần truy cập vào tệp hệ thống). Trong trường hợp này, công cụ chúng tôi sẽ sử dụng sẽ phải tìm tất cả các dòng lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 (là cú pháp không khả thi trong Javascript) và thay thế chúng bởi nội dung của từng tệp được yêu cầu. Kết quả cuối cùng là một tệp Javascript được đóng gói (mà không có dòng lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 nào)

Công cụ module bundler phổ biến nhất từng là Browserify, được ra mắt vào năm 2011 và là phong cách đầu tiên trong việc sử dụng câu lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 của nút. js ở phía frontend(mà về bản chất là thứ làm việc sử dụng npm khả thi và trở thành lựa chọn cho việc quản lý các package phía frontend). Tuy nhiên, đến khoảng năm 2015, webpack đã nổi lên và cuối cùng trở thành công cụ gói mô-đun phổ biến nhất (trong đó ảnh hưởng phần lớn đến từ sự phổ biến của framework frontend có tên là React, đã khai thác rất nhiều

Hãy cùng xem cách webpack được sử dụng để thực hiện dòng lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

05 ở phía trên hoạt động trong quá trình duyệt. Đầu tiên chúng ta cần cài đặt gói webpack trong dự án. Webpack bản thân nó là một gói npm, vì thế chúng ta có thể cài đặt từ dòng lệnh như sau

// index.js
console.log("Hello from JavaScript!");

1

Lưu ý tham số

// index.js
console.log("Hello from JavaScript!");

01 - khi thêm tham số này sẽ lưu webpack dưới dạng phụ thuộc cho việc phát triển, có nghĩa là chúng ta chỉ cần nó cho môi trường phát triển chứ không cần trong môi trường sản phẩm. Bạn có thể thấy câu lệnh được chạy sẽ được phản ánh vào tệp


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

84 như sau

// index.js
console.log("Hello from JavaScript!");

2

Giờ chúng ta đã có webpack dưới dạng một gói trong thư mục


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

87. Chúng ta có thể sử dụng webpack từ dòng lệnh như sau

// index.js
console.log("Hello from JavaScript!");

3

Câu lệnh này sẽ chạy gói webpack công cụ đã được cài đặt trong thư mục


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

87, bắt đầu với tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6, tìm bất kỳ dòng lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 nào và thay thế chúng bằng các đoạn mã tương ứng và tạo ra một tệp đầu ra có tên là

// index.js
console.log("Hello from JavaScript!");

07. Điều này có nghĩa là chúng ta sẽ không còn sử dụng tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6 trong trình duyệt nữa, vì nó chứa các câu lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 không được thi. Thay vào đó chúng ta sẽ sử dụng file

// index.js
console.log("Hello from JavaScript!");

07 trong file

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4 như dưới đây

// index.js
console.log("Hello from JavaScript!");

4

Nếu bạn mở trình duyệt, bạn sẽ thấy mọi thứ hoạt động như lúc trước

Lưu ý rằng chúng ta cần phải chạy từng dòng lệnh webpack mỗi khi chúng ta thay đổi tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6. Việc làm này khá phức tạp, và sẽ trở nên phiền phức hơn nữa khi chúng ta sử dụng các chức năng nâng cao của webpack (giống như [tạo bản đồ nguồn tệp] để giúp gỡ lỗi các đoạn mã nguyên bản từ các đoạn mã đã có được . Webpack có thể đọc các tùy chọn tùy chọn từ cấu hình tệp nằm trong thư mục gốc của dự án với tên là

// index.js
console.log("Hello from JavaScript!");

13, trong TH của chúng ta sẽ có nội dung như sau

// index.js
console.log("Hello from JavaScript!");

5

Giờ mỗi khi thay đổi tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6, chúng ta có thể chạy câu lệnh sau

// index.js
console.log("Hello from JavaScript!");

6

Chúng ta không cần thiết phải chỉ rõ các tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6 hay

// index.js
console.log("Hello from JavaScript!");

07 nữa, vì webpack đã tải các giá trị đó trong tệp

// index.js
console.log("Hello from JavaScript!");

13. Việc chạy lệnh đã trở nên đơn giản hơn, nhưng vẫn khá mệt mỏi khi chúng ta phải tự chạy câu lệnh này mỗi khi có mã thay đổi - chúng ta sẽ làm cho quá trình này mượt mà hơn một chút

Nói một cách tổng thể, mặc dù có thể không tác động nhiều, nhưng sẽ có một số lợi ích đáng kể khi chấp hành quy trình làm việc này. Chúng ta sẽ không cần phải tải các đoạn script bên ngoài thông qua các biến toàn cục. Bất kỳ thư viện Javascript nào sẽ được thêm vào thông qua câu lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 trong JS, thay vì sử dụng thẻ

// index.js
console.log("Hello from JavaScript!");

19 trong thẻ HTML. Chỉ có một file Javascript bundle cũng thường làm cho hiệu năng trở nên tốt hơn. Và giờ chúng ta đã thêm một bước xây dựng, chúng ta có thể sử dụng thêm một vài tính năng mạnh mẽ trong quá trình phát triển

Các chức năng biến đổi code sang ngôn ngữ mới (babel)

Mã chuyển đổi (phiên mã) có nghĩa là thay đổi mã từ một ngôn ngữ sang một ngôn ngữ tương tự khác. Đây là một phần quan trọng trong việc phát triển phía frontend - từ khi trình duyệt thường chậm tiến độ trong việc bổ sung các tính năng mới và các ngôn ngữ mới được tạo ra với các chức năng thử nghiệm mà có thể thay đổi về các biến

Với CSS, chúng ta có một vài cái tên biểu thị như Sass, Less và Stylus. Với Javascript, mã biến đổi chương trình đã từng phổ biến nhất trong một khoảng thời gian đã từng là CoffeeScript (được phát hành vào khoảng năm 2010), trong khi babel và TypeScript là những ngôn ngữ được sử dụng phổ biến trong thời gian gần đây. CoffeeScript là một tập tin ngôn ngữ trung vào việc cải thiện Javascript bằng cách thay đổi ngôn ngữ một cách đáng kể - các dấu trích dẫn trở thành không bắt buộc, các khoảng trắng có ý nghĩa,. Babel không phải là một ngôn ngữ mới mà là một trình biến đổi có tác dụng biến đổi các đoạn mã Javascript ở thế hệ mới nhất với các chức năng không khả thi ở tất cả các trình duyệt (ES2015 và các phiên bản mới hơn) . Typescript là một ngôn ngữ khá độc lập và khác với thế hệ Javascript kế tiếp, nhưng cũng có thêm phần tùy chọn kiểu dữ liệu tĩnh. Rất nhiều người chọn babel vì nó gần nhất với ngôn ngữ Javascript thuần túy

Dưới đây là một ví dụ sử dụng babel với bước xây dựng thông qua webpack. Đầu tiên chúng ta cài đặt babel (là một gói npm) thông qua câu lệnh

// index.js
console.log("Hello from JavaScript!");

7

Ở đây chúng ta đang cài đặt gói 3 riêng biệt cho phần phụ thuộc phát triển -

// index.js
console.log("Hello from JavaScript!");

20 là thành phần chính của babel,

// index.js
console.log("Hello from JavaScript!");

21 là các cài đặt trước được sử dụng để định nghĩa bất kỳ chức năng mới nào của Javascript được biến đổi, và

// index.js
console.log("Hello from JavaScript!");

22 là gói được sử dụng để cho phép babel . Chúng ta có thể cấu hình webpack để sử dụng

// index.js
console.log("Hello from JavaScript!");

22 bằng cách chỉnh sửa tệp

// index.js
console.log("Hello from JavaScript!");

13 như sau

// index.js
console.log("Hello from JavaScript!");

8

Cú pháp trong tập tin này có thể khiến chúng ta trở thành một con rối (rất may là chúng ta sẽ không phải sửa đổi những thứ này thường xuyên). Về cơ bản là chúng ta đang nói với webpack để tìm kiếm tập tin bất kỳ có đuôi nào. js (ngoại trừ các tệp nằm trong thư


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

87) và sử dụng babel để biến đổi mã thông qua

// index.js
console.log("Hello from JavaScript!");

22 với bộ đặt sẵn trong

// index.js
console.log("Hello from JavaScript!");

21. Bạn có thể đọc thêm về các cú pháp cấu hình webpack tại đây

Giờ sau khi mọi thứ đã được cài đặt, chúng ta có thể bắt đầu viết mã theo kiểu ES2015 trong mã Javascript. Đây là một ví dụ được áp dụng trong tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6

// index.js
console.log("Hello from JavaScript!");

9

Chúng ta cũng có thể sử dụng thay câu lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 để tải các mô-đun, và câu lệnh này rất hay được sử dụng trong mã của các gói npm hiện nay

moment().startOf('day').fromNow();        // 20 hours ago

0

Trong ví dụ này, câu lệnh

// index.js
console.log("Hello from JavaScript!");

30 không khác gì nhiều so với câu lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06, nhưng

// index.js
console.log("Hello from JavaScript!");

30 có sự linh hoạt cao hơn trong rất nhiều trường hợp nâng cao. Bởi vì chúng ta đã thay đổi tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6, chúng ta cần phải chạy lệnh webpack một lần nữa

// index.js
console.log("Hello from JavaScript!");

6

Giờ bạn có thể tải lại trang

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4 trong trình duyệt. Vào thời điểm bài viết này ra đời, hầu hết các trình duyệt đều đã hỗ trợ đầy đủ chức năng của ES2015, vì thế khó có thể thấy tác dụng thực sự của babel. Nếu muốn, chúng ta có thể kiểm tra ở một số trình duyệt cũ hơn như IE9, hoặc có thể tìm kiếm trong tệp

// index.js
console.log("Hello from JavaScript!");

07 để xem đoạn mã đã được biến đổi

moment().startOf('day').fromNow();        // 20 hours ago

2

Tại đây, bạn có thể thấy babel đã biến đổi các đoạn mã của chuỗi mẫu trong ES2015 sang các đoạn mã Javascript thông thường với các cú pháp nối chuỗi bằng dấu + để đảm bảo tính tương thích với trình duyệt. Mặc dù ví dụ này có vẻ không thú vị lắm, nhưng mã biến đổi khả năng là một tính năng thực sự mạnh mẽ. Có một vài tính năng thú vị đã được đưa vào JavaScript như async/await, mà bạn có thể thiết lập tức sử dụng để viết mã một cách tốt hơn. Và trong khi biến mã đổi mã có vẻ khó chịu và mệt mỏi, nhưng nó đã tạo ra sự thay đổi rất đáng để đến với JS trong vài năm gần đây, bởi vì mọi người đã có thể kiểm tra các chức năng của ngày tháng năm.

Chúng ta gần như đã điểm qua mọi tính nhưng vẫn có một vài điểm chưa được trau chuốt lắm trong workflow của chúng ta. Nói về vấn đề hiệu suất, chúng ta có thể làm nhẹ/nén tệp bó, mà có thể dễ dàng thực hiện thông qua bước xây dựng. Chúng ta cũng cần phải chạy lại lệnh webpack mỗi khi chúng ta thay đổi tệp JavaScript. Và tiếp theo đây sẽ là một số công cụ hỗ trợ giải quyết những công việc trên một cách tự động

Use a task running - task runner (use npm scripts)

Sau khi đã tạo ra một bước xây dựng để làm việc với mô-đun Javascript, thì việc sử dụng một bộ chạy tác vụ, với mục đích tự động hóa các thành phần trong quá trình xây dựng. Đối với việc phát triển frontend, các nhiệm vụ sẽ bao gồm các công việc làm gọn mã, tối ưu hóa hình ảnh, chạy thử nghiệm,

Vào năm 2013, Grunt đã từng là một công cụ phổ biến nhất cho việc chạy tác vụ, ngay sau đó là Gulp. Cả hai đều phụ thuộc vào các plugin bao ngoài dòng lệnh công cụ. Ngày nay, lựa chọn biến phổ biến nhất có vẻ là sử dụng khả năng tương thích với tập lệnh được xây dựng trong npm chính, không sử dụng plugin nhưng thay vào đó hoạt động với các công cụ dòng lệnh khác một cách trực tiếp

Hãy cùng viết một vài script npm để giúp việc sử dụng webpack dễ dàng hơn. Việc này bao gồm một số thay đổi đơn giản trong tệp


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

84 giống như dưới đây

moment().startOf('day').fromNow();        // 20 hours ago

3

Ở đây chúng ta có 2 đoạn script mới tên là

// index.js
console.log("Hello from JavaScript!");

37 và

// index.js
console.log("Hello from JavaScript!");

38. Để chạy đoạn mã dựng sẵn, bạn có thể nhập dòng lệnh sau

moment().startOf('day').fromNow();        // 20 hours ago

4

This job will run webpack (sử dụng cấu hình từ tệp

// index.js
console.log("Hello from JavaScript!");

13 chúng tôi đã tạo trước đó) với tùy chọn

// index.js
console.log("Hello from JavaScript!");

40 để hiển thị quá trình phần trăm và tùy chọn

// index.js
console.log("Hello from JavaScript!");

41 để mã hóa tối thiểu cho sản phẩm môi trường. To run command

// index.js
console.log("Hello from JavaScript!");

38

moment().startOf('day').fromNow();        // 20 hours ago

5

Câu lệnh này sử dụng tùy chọn

// index.js
console.log("Hello from JavaScript!");

43 để tự động chạy lại webpack mỗi khi có bất kỳ thay đổi bất kỳ nào trong tệp Javascript, là một chức năng rất tuyệt vời cho sự phát triển

Lưu ý rằng các tập lệnh trong tệp


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

84 có thể chạy webpack mà không cần phải chỉ định đường dẫn

// index.js
console.log("Hello from JavaScript!");

45, vì nút. js could get known known as position of each npm module. Việc làm này khá là ngon. Chúng ta có thể làm cho nó ngon hơn nữa bằng cách cài đặt một công cụ có tên là

// index.js
console.log("Hello from JavaScript!");

46, sẽ cung cấp một máy chủ web đơn giản hỗ trợ tải lại trực tiếp. To install the tool that as a phụ thuộc phát triển, hãy nhập câu lệnh sau

moment().startOf('day').fromNow();        // 20 hours ago

6

Và sau đó thêm đoạn script npm vào tệp


DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Exampletitle>
  <script src="index.js">script>
head>
<body>
  <h1>Hello from HTML!h1>
body>
html>

84

moment().startOf('day').fromNow();        // 20 hours ago

7

Và giờ chúng ta có thể khởi động máy chủ phát triển với câu lệnh

moment().startOf('day').fromNow();        // 20 hours ago

8

This job will auto open a website Chứa file

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4 in your browser with path is

// index.js
console.log("Hello from JavaScript!");

49 (default value). Bất kể thời điểm nào bạn thay đổi kỳ mã JavaScript trong tệp

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

6, webpack-dev-server sẽ tự động xây dựng lại tệp Javscript đã đóng gói và làm mới lại trình duyệt một cách tự động. Đây là một chức năng sẽ giúp bạn tiết kiệm rất nhiều thời gian, vì nó cho phép chúng ta có thể tập trung vào mã thay vì phải liên tục thay đổi giữa trình duyệt và mã để xem những thay đổi mới

Những điều tôi trình bày ở trên chỉ là những bề mặt thô sơ, còn rất nhiều lựa chọn tùy ý với webpack và webpack-dev-server (bạn có thể tham khảo thêm tại đây). Bạn có thể tự tạo cho mình những đoạn script npm để chạy các công việc khác, chẳng hạn như chuyển đổi từ SCSS về CSS, nén ảnh, chạy thử nghiệm - bất kỳ thứ gì hỗ trợ công cụ dòng lệnh hỗ trợ. Đồng thời cũng có rất nhiều tùy chọn nâng cao cùng với một vài mẹo nho nhỏ hay ho với script về npm, mà bạn có thể tham khảo ở bài nói dưới đây của Kate Hudson

Tổng kết

Trên đây là tổng quan về Javascript hiện nay. Chúng ta đã đi từ HTML thuần túy và JS đến việc sử dụng một gói quản lý bộ để tự động tải xuống các gói ở bên thứ 3, sử dụng một gói công cụ cho mô-đun để tạo ra một tập lệnh tập lệnh duy nhất, một bộ biến đổi để thay đổi. . Đương nhiên là có rất nhiều thứ ở đây, đặc biệt là đối với người mới bắt đầu. Phát triển web đã từng là điểm bắt đầu rất tuyệt vời cho những người mới học lập trình bởi nó rất dễ dàng để hiểu và phát triển;

Tuy nhiên, mọi công việc đều không nhất định phải đạt đến mức như vậy. Nhiều thứ đang trở nên ổn định dần dần, đặc biệt với sự thích nghi của nút hệ thống sinh thái trong việc hỗ trợ phát triển phía frontend. Việc sử dụng npm như một công cụ quản lý gói, các câu lệnh

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

06 hoặc

// index.js
console.log("Hello from JavaScript!");

30 cho các mô-đun và các đoạn script npm để chạy tác vụ đã trở nên rất tốt và gần như là mặc định. Có thể nói đây là một quy trình công việc khá đơn giản và mạnh mẽ khi so với thời điểm 1 hoặc 2 năm trước đó

Một điều nữa cũng làm cho các lập trình viên cảm thấy dễ thở hơn, đó là việc các khuôn khổ hiện nay đã có thêm các công cụ để làm cho quá trình phát triển trở nên dễ thở hơn. Ember có ember-cli, là công cụ lấy cảm hứng phần lớn từ góc-cli của Angular, React thì có tạo-react-app, Vue thì có vue-cli,. Tất cả các công cụ sẽ giúp bạn khởi động một dự án với mọi thứ bạn cần - tất cả mọi thứ, để bạn có thể lập tức bắt tay vào mã viết. Tuy nhiên, các công cụ đó không phải là phép thuật, nó chỉ đơn giản lại quá trình cài đặt theo tiêu chuẩn ổn định và theo cách chung. Cũng có những thời điểm bạn muốn thêm vào một vài tùy chỉnh với webpack, babel. nên việc hiểu được khả năng ứng dụng và khả năng của từng thành phần là rất quan trọng (đã được nói đến trong bài viết này)

Javascript thời nay rất có thể trở nên rắc rối khi phải làm việc cùng do sự thay đổi và tiến trình hóa nhanh chóng của nó. Nhưng cùng với đó, vào nhưng thời điểm giống như lúc xây dựng lại cái bánh xe, sự phát triển nhanh chóng của Javascript đã thúc đẩy sự tiến bộ và cho ra đời những điều rất tuyệt vời như là hot loading, linting (phân tích . Đây là thời gian rất thú vị để trở thành một học viên lập trình, và tôi hy vọng những thông tin này có thể giúp bạn trở thành một lộ trình trên con đường sự nghiệp của mình

programming javascript

Tối thiểu trong javascript

Sử dụng Javascript theo cách "cổ điển"

Sử dụng bộ quản lý gói Javascript (npm)

Sử dụng công cụ đóng gói (gói) mô-đun Javascript (webpack)

Các chức năng biến đổi code sang ngôn ngữ mới (babel)

Use a task running - task runner (use npm scripts)

Tổng kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội