BROWSERIFY LÀ GÌ

     

Bài viết này là phần 2 của loạt bài dịch bí quyết viết JavaScript hiện nay đại.

Bạn đang xem: Browserify là gì

Những người mong muốn theo dõi từ bỏ đầu có thể xem phần 1 ngơi nghỉ đây:

Cách viết JavaScript hiện tại đại: Phần 1: Tổng hợp những điểm mới hoàn toàn có thể thực hành ngay

Chuỗi bài viết này sử dụng cho những browser đáp ứng nhu cầu tiêu chuẩn chỉnh ECMAScript5 yêu cầu không dùng được mang đến IE8 trở xuống.

Bài viết vẫn trung thành với quan điểm giải thích một cách dễ nắm bắt nhất.

Mục lục

Phần 1: Tổng hợp các điểm mới có thể thực hành ngay

Phần 2: làm quen với CommonJS module

Phần 3: Master Browserify

Phần 4: tự động hóa xử lý dùng Gulp

Phần 5: ghi nhớ cú pháp của ES2015

Lời mở đầu

Trong bài xích viết, cụm từ CommonJS module được dùng để làm chỉ module specs và interface (require/exports.○○/module.exports) dùng Node.js tự do mở rộng lớn CommonJS từ cơ sở là specs của Modules 1.0 của CommonJS.

Nó không tức là CommonJS của dự án công trình về đặc điểm kỹ thuật tiêu chuẩn chỉnh phát triển tốt specs của CommonJS Modules 1.0.

Khi các bạn nhìn vào code của nhiều website, bạn có kinh ngạc khi thấy những đoạn code sau không?

require…var hoge = require("hoge");var piyo = hoge.fuga();// ...(Xử lý bất kỳ)module.exports…function Hoge() // ...(Xử lý bất kỳ)module.exports = Hoge;Có thể các bạn sẽ ngay chớp nhoáng phản ứng như sau:

"Theo tôi biết thì JavaScript không có require cùng module mà?"

"Tôi đã thử copy paste và quả nhiên là không hoạt động trên trình duyệt."

Xin hãy yên ổn tâm, đoạn code này rất có thể chạy trên trình duyệt.Tuy nhiên, để chạy được thì bạn cần biết vài điều.

Phần trình bày dưới đây sẽ giải thích cụ thể về khái niệm, xuất phát và cách để đưa những module này vào trình duyệt.

1. Việc phân chia thành các module

Khi một script to đến một mức làm sao đó, chúng ta có thể tổng hợp các công dụng hay cần sử dụng thành các module.

Đến nay, họ vẫn thường triển khai việc này bên trên trình duyệt bằng phương pháp tạo file .js, trải qua HTML rất có thể load nhiều lần.

Ví dụ, khi mọi người tiêu dùng jQuery (không dùng CDN), chắc chắn là mọi bạn đã hotline jQuery file bằng script tag.

Ví dụ áp dụng jQuery module

myjquery.js!function() window.jQuery = jQuery; window.$ = jQuery; // Module để đưa 1 string giờ Nhật sang trọng query string function jQuery(obj) var keys = Object.keys(obj); if(!keys.length) return ""; return "?" + keys.map(function(key) return encodeURIComponent(key) + "=" + encodeURIComponent(obj); ).join("&"); ();/*var text = jQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18*/Bây giờ cùng lúc gọi module này và jQuery mọi fan vẫn thường dùng thì sẽ xẩy ra vấn đề.

Ở năm năm 2016 này, không mong muốn là CommonJS module vẫn còn hữu dụng và vẫn được dùng liên tiếp nên vẫn nên biết về bí quyết xử lý các module này.

2. CommonJS module là gì

Về sự việc này còn tương đối nhiều tranh cãi, bài này vẫn chỉ ra gần như điểm thông thường nhất.

CommonJS module là các module vừa lòng các điều kiện sau:

2.1. Khi tạo thành module thì sử dụng module.exports hoặc exports.○○

Thực hiện nay CommonJS của myjquery.js

/* bỏ bí quyết gán trực tiếp mang đến window objectwindow.jQuery = jQuery;window.$ = jQuery;*/// núm vào đó cần sử dụng module.exportsmodule.exports = jQuery;// Module để gửi 1 string giờ đồng hồ Nhật thanh lịch query stringfunction jQuery(obj) var keys = Object.keys(obj); if(!keys.length) return ""; return "?" + keys.map(function(key) return encodeURIComponent(key) + "=" + encodeURIComponent(obj); ).join("&");2.2. Khi hotline CommonJS module, áp dụng hàm requireGọi module cần sử dụng require

var jQuery = require("jQuery"); // jQuery mọi người thường dùngvar myJQuery = require("https://toptrungtamanhngu.com/myjquery.js"); // jQuery của bản thân// từng module được chuyển vào 1 hàmconsole.log(typeof(jQuery)); // "function"console.log(typeof(myJQuery)); // "function"https:// Theo cơ chế của CommonJS, không gán xuống window object nên không bị hình ảnh hưởng.console.log(typeof(window.jQuery)); // "undefined"https:// jQuery được dùng ở đó là jQuery bọn họ vẫn thân quen biết!jQuery(function($) // Viết cách xử lý ở đây);//Cùng lúc đó chúng ta có thể dùng jQuery của phiên bản thân mìnhvar text = myJQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18Ở đây người sáng tác đưa ra việc thực hiện CommonJS module jQuery mà những người thường dùng nhưng đừng chú ý gì cả.(Module nổi tiếng như jQuery thì vẫn có các kỹ sư tài ba tạo ra).

Xem thêm: Đọc Truyện Quen Nhau Qua Buổi Xem Mắt (Full), Quen Nhau Qua Buổi Xem Mắt Full

Đến phía trên thì bài toán đổi một module đã bao gồm sẵn thành CommonJS module kết thúc.Tuy nhiên, ví như chỉ thay đổi thôi thì nó vẫn chưa chuyển động trên trình duyệt.

Đã bao gồm Node.js

"Nhưng nguyên nhân lại nhắc tới Node.js lúc đang nói tới Web?"

Hãy yên ổn tâm. Dù hơi mơ hồ dẫu vậy thực sự có mối quan hệ ở đây.

Thực ra Node.js đã được nghe biết trong 5 năm vừa mới đây và dần trở nên phổ cập nên ở đây chỉ lý giải sơ lược.

Node.js là môi trường JavaScript hướng vps side chuyển động trong V8 engine.

Node.js

Node.js tuân hành ECMAScript nên tất nhiên không gồm DOM API và chuyển động trên console chứ không hẳn trên trình duyệt. Vị đó, có thể nó ko thân quen với những người chuyên viết code phía browser.

Điều tôi thực sự hy vọng nói ở đây chưa hẳn là về Node.js nhưng chỉ muốn nhấn vào 2 điểm:

Node.js đang ngày càng thịnh hành

Node.js có thể dùng CommonJS module

Tức là Node.js tạo nên CommonJS module trở nên phổ biến.

3. Áp dụng CommonJS module vào Web

Đến đây những người tinh ý có thể đã suy nghĩ ra để sử dụng CommonJS module bên trên Web browser thì rất có thể sử dụng Node.js.Và quả và đúng là như vậy.

Về lý thuyết cũng đều có cách không đề xuất dùng mang đến Node.js cơ mà không không còn xa lạ với những lập trình viên JS cần không nhắc ở đây.

Thực ra có một trong những module dùng làm đổi sang Web browser nhưng lừng danh nhất là Browserify (sẽ lý giải thêm ở chỗ sau).

Việc sử dụng CommonJS module trên Web browser được tổng phù hợp trong sơ đồ dùng dưới đây:

*

Điểm cần để ý ở đấy là dù sử dụng cho Node.js giỏi Web browser thì hầu hết dùng chung câu hỏi require. Chỉ bao gồm điều khi sử dụng trên web browser thì tất cả thêm bước xử lý chuyển đổi.

4. Browserify là gì?

Từ phần bên trên ta có thể hiểu chút ít về Browserify rồi. Đó là công cụ chuyển đổi để code được viết bằng CommonJS module hoàn toàn có thể chạy được bên trên trình duyệt.(Tuy nhiên, ở nội dung bài viết này sẽ không còn nói về kiểu cách dùng Node.js với Browserify để xử lý)

Ví dụ dưới đây minh hoạ cách tạo tệp tin input.js bao gồm require myjquery.js

input.jsvar jQuery = require("https://toptrungtamanhngu.com/myjquery.js");var text = jQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18Sử dụng Browserify để chuyển đổi phần code này, ta sẽ sở hữu được đoạn code sau:

output.js(function e(t,n,r)function s(o,u)if(!n)if(!t)var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module ""+o+""");throw f.code="MODULE_NOT_FOUND",fvar l=n=exports:;t<0>.call(l.exports,function(e)var n=t<1>;return s(n?n:e),l,l.exports,e,t,n,r)return n.exportsvar i=typeof require=="function"&&require;for(var o=0;or.length;o++)s(r);return s)(1:,2:,,<1>);Đoạn code sẽ được đưa sang dạng khá dễ dàng hiểu.Đến đây, như vẫn nói tại đoạn 1, hãy thử dấn F12, mở tool của developer, copy paste đoạn code của output.js vào console window và chạy thử.Đoạn code sẽ chạy không lỗi trên trình để ý và string "?name=%E3%81%8C%E3%81%8A&age=18" sẽ được xuất ra làm việc console window.

Và như vậy, nếu cần sử dụng Browserify để giải pháp xử lý chuyển đổi tự động hóa CommonJS module thì nó hoàn toàn có thể dùng được trên trình duyệt.

Phần 2 đến đó là kết thúc.

Xem thêm: Xem Lịch Âm Dương Tháng 2 Năm 2021 Dương Lịch, Lịch Vạn Niên Tháng 02 Năm 2021 Dương Lịch

Mặc cho dù cách biến đổi chưa được trình làng nhưng qua phần này các bạn có thể hiểu được định nghĩa cơ bản của biện pháp dùng module kha khá hiện đại.