Browserify Là Gì

admin - 02/05/2022 176

Bài viết này là phần 2 của loạt bài dịch Cách viết JavaScript văn minh.

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

Những tín đồ muốn quan sát và theo dõi từ đầu có thể coi phần 1 nghỉ ngơi đây:

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

Chuỗi bài viết này thực hiện cho các browser đáp ứng nhu cầu tiêu chuẩn ECMAScript5 yêu cầu không cần sử dụng được mang đến IE8 trsinh hoạt xuống.

Bài viết vẫn trung thành với chủ cùng với cách nhìn lý giải một bí quyết dễ nắm bắt độc nhất.

Mục lục

Phần 1: Tổng vừa lòng những điểm bắt đầu rất có thể thực hành thực tế ngay

Phần 2: Làm thân quen với CommonJS module

Phần 3: Master Browserify

Phần 4: Tự đụng hóa giải pháp xử lý dùng Gulp

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

Lời msinh hoạt đầu

Trong nội dung bài viết, nhiều từ bỏ CommonJS module được dùng để chỉ module specs cùng interface (require/exports.○○/module.exports) cần sử dụng Node.js hòa bình không ngừng mở rộng CommonJS từ các đại lý là specs của Modules 1.0 của CommonJS.

Nó ko có nghĩa là CommonJS của dự án công trình về Đặc điểm kỹ thuật tiêu chuẩn cách tân và phát triển tuyệt specs của CommonJS Modules 1.0.

Lúc các bạn nhìn vào code của tương đối nhiều trang web, các bạn tất cả ngạc nhiên trong 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ũng có thể những bạn sẽ ngay chớp nhoáng bội nghịch ứng nhỏng sau:

"Theo tôi biết thì JavaScript không tồn tại require và module mà?"

"Tôi đã làm copy paste và quả nhiên là ko hoạt động bên trên trình chăm nom."

Xin hãy im chổ chính giữa, đoạn code này có thể điều khiển xe trên trình phê chuẩn.Tuy nhiên, để chạy được thì bạn nên biết đôi điều.

Phần trình diễn sau đây đã giải thích rõ ràng về khái niệm, xuất phát cùng phương pháp để đưa các module này vào trình thông qua.

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

Lúc một script Khủng mang đến một nấc làm sao đó, chúng ta cũng có thể tổng hòa hợp các chức năng giỏi dùng thành những module.

Đến ni, họ vẫn thường thực hiện câu hỏi này trên trình chu đáo bằng cách chế tác file .js, thông qua HTML hoàn toàn có thể load những lần.

ví dụ như, Khi hầu hết người tiêu dùng jQuery (ko dùng CDN), chắc hẳn rằng các người sẽ Hotline jQuery file bởi script tag.

lấy ví dụ thực hiện jQuery module

myjquery.js!function() window.jQuery = jQuery; window.$ = jQuery; // Module nhằm chuyển 1 string giờ Nhật thanh lịch 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ờ đồng hồ đồng thời Hotline module này với jQuery gần như người vẫn thường được sử dụng thì vẫn xẩy ra vụ việc.

Tại năm 2016 này, đáng tiếc là CommonJS module vẫn còn có lợi với vẫn được sử dụng liên tiếp bắt buộc vẫn nên biết về cách xử lý các module này.

2. CommonJS module là gì

Về vấn đề này còn tương đối nhiều tranh cãi xung đột, bài bác này vẫn đã cho thấy đông đảo điểm phổ biến độc nhất vô nhị.

CommonJS module là những module vừa lòng các ĐK sau:

2.1. lúc tạo thành module thì dùng module.exports hoặc exports.○○

Thực hiện tại CommonJS của myjquery.js

/* vứt biện pháp gán thẳng cho window objectwindow.jQuery = jQuery;window.$ = jQuery;*/// Ttuyệt vào đó cần sử dụng module.exportsmodule.exports = jQuery;// Module để gửi 1 string giờ Nhật sang 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 Gọi CommonJS module, thực hiện hàm requirehotline module cần sử dụng require

var jQuery = require("jQuery"); // jQuery mọi bạn hay dùngvar myJQuery = require("https://luyenkimmau.com.vn/myjquery.js"); // jQuery của bản thân// Mỗi module được chuyển vào 1 hàmconsole.log(typeof(jQuery)); // "function"console.log(typeof(myJQuery)); // "function"https:// Theo lý lẽ của CommonJS, không gán xuống window object đề xuất không bị ảnh hưởng.console.log(typeof(window.jQuery)); // "undefined"https:// jQuery được dùng ngơi nghỉ đấy là jQuery bọn họ vẫn thân quen biết！jQuery(function($) // Viết xử trí ở đây);//Cùng cơ hội kia chúng ta cũng có thể sử dụng jQuery của bạn dạng thân mìnhvar text = myJQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18Ở phía trên người sáng tác chỉ dẫn vấn đề tiến hành CommonJS module jQuery cơ mà gần như fan hay sử dụng tuy vậy chớ lưu ý gì cả.(Module nổi tiếng nlỗi jQuery thì đang gồm các kỹ sư tài tía tạo ra).

Xem thêm: Typhoon Là Gì ? Từ Điển Anh Việt Typhoon

Đến phía trên thì vấn đề đổi một module vẫn có sẵn thành CommonJS module ngừng.Tuy nhiên, giả dụ chỉ thay đổi thôi thì nó vẫn chưa chuyển động bên trên trình chăm sóc.

Đã gồm Node.js

"Nhưng tại vì sao lại nhắc đến Node.js Lúc sẽ nói đến Web?"

Hãy lặng trung khu. Dù hơi mơ hồ nước nhưng lại thực thụ tất cả mối quan hệ tại chỗ này.

Thực ra Node.js đã được nghe biết vào 5 năm cách đây không lâu và dần dần trsinh hoạt cần phổ cập nên ở đây chỉ giải thích sơ sài.

Node.js là môi trường xung quanh JavaScript hướng hệ thống side chuyển động vào V8 engine.

Node.js

Node.js tuân thủ ECMAScript cần dĩ nhiên không có DOM API cùng hoạt động bên trên console chứ đọng chưa hẳn trên trình để ý. Do kia, có thể nó ko không còn xa lạ cùng với những người dân chuyên viết code hướng browser.

Điều tôi thực sự mong mỏi nói ở đây chưa phải là về Node.js cơ mà chỉ ước ao bấm vào 2 điểm:

Node.js sẽ càng ngày càng thịnh hành

Node.js rất có thể cần sử dụng CommonJS module

Tức là Node.js tạo nên CommonJS module trsinh sống cần phổ biến.

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

Đến trên đây những người tinc ý rất có thể vẫn nghĩ về ra nhằm cần sử dụng CommonJS module trên Web browser thì rất có thể sử dụng Node.js.Và quả đúng là những điều đó.

Về kim chỉ nan cũng có thể có bí quyết không nên cần sử dụng mang lại Node.js tuy thế không không còn xa lạ với những thiết kế viên JS đề xuất ko đề cập ở đây.

Thực ra có một vài module dùng để làm đảo sang Web browser dẫu vậy danh tiếng duy nhất là Browserify (đang giải thích thêm tại đoạn sau).

Việc sử dụng CommonJS module bên trên Web browser được tổng vừa lòng trong sơ đồ dưới đây:

Điểm buộc phải chú ý sinh sống đây là dù sử dụng cho Node.js tuyệt Web browser thì đầy đủ dùng phổ biến việc require. Chỉ tất cả điều khi dùng trên Web browser thì tất cả thêm bước xử trí biến đổi.

4. Browserify là gì?

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

lấy một ví dụ tiếp sau đây minch hoạ cách sinh sản file đầu vào.js tất cả require myjquery.js

đầu vào.jsvar jQuery = require("https://luyenkimmau.com.vn/myjquery.js");var text = jQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18Sử dụng Browserify để thay đổi phần code này, ta sẽ sở hữu đ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 đã được chuyển sang trọng dạng hơi dễ dàng nắm bắt.Đến đây, nlỗi đang nói ở trong phần 1, hãy thử nhận F12, mnghỉ ngơi tool của developer, copy paste đoạn code của output.js vào console window và chạy thử.Đoạn code vẫn chạy không lỗi bên trên trình chăm bẵm với string "?name=%E3%81%8C%E3%81%8A&age=18" sẽ được xuất ra ngơi nghỉ console window.

Và những điều đó, giả dụ cần sử dụng Browserify nhằm xử lý thay đổi tự động hóa CommonJS module thì nó có thể sử dụng được trên trình lưu ý.

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

Xem thêm: Kinh Nghiệm Giao Dịch Forex, Kinh Nghiệm Chơi Forex Thực Tế Của Bản Thân

Mặc cho dù bí quyết chuyển đổi không được ra mắt nhưng lại qua phần này các bạn cũng có thể hiểu được quan niệm cơ bản của bí quyết sử dụng module kha khá hiện đại.