Hướng dẫn what is require () in javascript? - Yêu cầu () trong javascript là gì?

Necromancing. IMHO, các câu trả lời hiện có để lại nhiều điều mong muốn.
IMHO, the existing answers leave much to be desired.

Lúc đầu, nó rất khó hiểu. Bạn có chức năng (không xác định) "yêu cầu", được sử dụng để có các mô -đun. Và trong các mô -đun (CommonJS) đã nói, bạn có thể sử dụng

const fs = require('fs');

5, mà không cần chúng được xác định. Không phải là mới mà bạn có thể sử dụng các biến không xác định trong JS, nhưng bạn không thể sử dụng hàm không xác định. Vì vậy, nó trông hơi giống ma thuật lúc đầu. Nhưng tất cả phép thuật dựa trên sự lừa dối.
You have a (nowhere defined) function "require", which is used to get modules.
And in said (CommonJS) modules, you can use

const fs = require('fs');

5,
WITHOUT THEM EVER BEING DEFINED.
Not that it would be new that you could use undefined variables in JS, but you couldn't use an undefined function.
So it looks a little like magic at first.
But all magic is based on deception.

Khi bạn đào sâu hơn một chút, hóa ra nó thực sự khá đơn giản: yêu cầu chỉ đơn giản là một hàm (không chuẩn) được xác định ở phạm vi toàn cầu. (phạm vi toàn cầu = đối tượng cửa sổ trong trình duyệt, đối tượng toàn cầu trong nodejs). Lưu ý rằng theo mặc định, "hàm yêu cầu" chỉ được triển khai trong NodeJS, không phải trong trình duyệt. Ngoài ra, lưu ý rằng để thêm vào sự nhầm lẫn, đối với trình duyệt, có các yêu cầu, mặc dù tên chứa các ký tự "yêu cầu", các yêu cầu hoàn toàn không thực hiện/commonJS - thay vào đó không giống nhau. Đó là một điều cuối cùng chỉ là một điều quan trọng bạn phải nhận ra theo cách để hiểu yêu cầu.
Require is simply a (non-standard) function defined at global scope.
(global scope = window-object in browser, global-object in NodeJS).
Note that by default, the "require function" is only implemented in NodeJS, not in the browser.
Also, note that to add to the confusion, for the browser, there is RequireJS, which, despite the name containing the characters "require", RequireJS absolutely does NOT implement require/CommonJS - instead RequireJS implements AMD, which is something similar, but not the same.
That last one is just one important thing you have to realize in your way to understanding require.

Bây giờ, như vậy, để trả lời câu hỏi "những gì cần thiết", chúng tôi "chỉ đơn giản là" cần biết chức năng này làm gì. Điều này có lẽ được giải thích tốt nhất với mã.
This is perhaps best explained with code.

Đây là một triển khai đơn giản của Michele Nasti, mã bạn có thể tìm thấy trên trang GitHub của anh ấy.

Hãy gọi cho việc triển khai hàm yêu cầu tối thiểu của chúng tôi là "MyRequire":

function myRequire(name) 
{
    console.log(`Evaluating file ${name}`);
    if (!(name in myRequire.cache)) {
        console.log(`${name} is not in cache; reading from disk`);
        let code = fs.readFileSync(name, 'utf8');
        let module = { exports: {} };
        myRequire.cache[name] = module;
        let wrapper = Function("require, exports, module", code);
        wrapper(myRequire, module.exports, module);
    }
    console.log(`${name} is in cache. Returning it...`);
    return myRequire.cache[name].exports;
}
myRequire.cache = Object.create(null);
window.require = myRequire;
const stuff = window.require('./main.js');
console.log(stuff);

Bây giờ bạn nhận thấy, đối tượng "FS" được sử dụng ở đây. Để đơn giản, Michele chỉ nhập mô -đun NodeJS FS:
For simplicity's sake, Michele just imported the NodeJS fs module:

const fs = require('fs');

Mà sẽ không cần thiết. Vì vậy, trong trình duyệt, bạn có thể thực hiện một triển khai đơn giản các yêu cầu với XMLHttprequest đồng bộ:
So in the browser, you could make a simple implementation of require with a SYNCHRONOUS XmlHttpRequest:

const fs = {
    file: `
    // module.exports = \"Hello World\";
        
    module.exports = function(){ return 5*3;};
    
    `
    , getFile(fileName: string, encoding: string): string
    {
        // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
        let client = new XMLHttpRequest();
        // client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

        // open(method, url, async)
        client.open("GET", fileName, false);
        client.send();
        if (client.status === 200)
            return client.responseText;

        return null;
    }


    , readFileSync: function (fileName: string, encoding: string): string
    {
        // this.getFile(fileName, encoding);
        return this.file; // Example, getFile would fetch this file 
    }
};

Về cơ bản, những gì yêu cầu do đó, nó có tải xuống một tệp javascript, đưa ra nó trong một không gian tên ẩn danh (AKA Function), với các tham số "yêu cầu", "xuất" và "mô-đun" và trả về chức năng và tính chất.

Lưu ý rằng đánh giá này là đệ quy: bạn yêu cầu các tệp mà chính họ có thể yêu cầu các tệp.

Bằng cách này, tất cả các biến "toàn cầu" được sử dụng trong mô-đun của bạn là các biến trong không gian tên chức năng viết yêu cầu và không gây ô nhiễm phạm vi toàn cầu với các biến không mong muốn.

Ngoài ra, theo cách này, bạn có thể sử dụng lại mã mà không phụ thuộc vào các không gian tên, vì vậy bạn nhận được "mô -đun" trong JavaScript. "Tính mô -đun" trong các trích dẫn, bởi vì điều này không chính xác, bởi vì bạn vẫn có thể viết window.bla/global.bla, và do đó vẫn gây ô nhiễm phạm vi toàn cầu ... Ngoài ra, điều này thiết lập sự tách biệt giữa các chức năng tư nhân và công cộng, Các chức năng công cộng là xuất khẩu."modularity" in quotes, because this is not exactly true, though, because you can still write window.bla/global.bla, and hence still pollute the global scope... Also, this establishes a separation between private and public functions, the public functions being the exports.

Bây giờ thay vì nói

module.exports = function(){ return 5*3;};

Bạn cũng có thể nói:

function privateSomething()
{
    return 42:
}


function privateSomething2()
{
    return 21:
}


module.exports = {
      getRandomNumber: privateSomething
     ,getHalfRandomNumber: privateSomething2
};

và trả về một đối tượng.

Ngoài ra, vì các mô -đun của bạn được đánh giá trong một hàm với các tham số "yêu cầu", "xuất" và "mô -đun", các mô -đun của bạn có thể sử dụng các biến không được khai báo "yêu cầu", "xuất" và "mô -đun", có thể gây sửng sốt. Tham số yêu cầu Tất nhiên có một con trỏ đến hàm yêu cầu được lưu vào một biến. Tuyệt, phải không? Nhìn theo cách này, yêu cầu mất phép thuật của nó, và trở nên đơn giản.
Cool, right ?
Seen this way, require looses its magic, and becomes simple.

Bây giờ, chức năng yêu cầu thực sự sẽ thực hiện thêm một vài kiểm tra và kỳ quặc, tất nhiên, nhưng đây là bản chất của những gì sôi sục.

Ngoài ra, vào năm 2020, bạn nên sử dụng các triển khai ECMA thay vì yêu cầu:

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

Và nếu bạn cần nhập không tĩnh động (ví dụ: tải một polyfill dựa trên loại trình duyệt), có chức năng/từ khóa ECMA-istInport:

var promise = import("module-name");

Lưu ý rằng nhập không đồng bộ như yêu cầu. Thay vào đó, nhập khẩu là một lời hứa, vì vậy
Instead, import is a promise, so

var something = require("something");

trở thành

var something = await import("something");

Bởi vì nhập trở lại một lời hứa (không đồng bộ).

Vì vậy, về cơ bản, không giống như yêu cầu, nhập thay thế fs.readFilesYNC bằng fs.readfileasync.

async readFileAsync(fileName, encoding) 
{
    const textDecoder = new TextDecoder(encoding);
    // textDecoder.ignoreBOM = true;
    const response = await fetch(fileName);
    console.log(response.ok);
    console.log(response.status);
    console.log(response.statusText);
    // let json = await response.json();
    // let txt = await response.text();
    // let blo:Blob = response.blob();
    // let ab:ArrayBuffer = await response.arrayBuffer();
    // let fd = await response.formData()
    // Read file almost by line
    // https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader/read#Example_2_-_handling_text_line_by_line
    let buffer = await response.arrayBuffer();
    let file = textDecoder.decode(buffer);
    return file;
} // End Function readFileAsync

Điều này tất nhiên đòi hỏi chức năng nhập khẩu cũng là ASYNC..

const fs = require('fs');

0

Thậm chí tốt hơn, phải không? Vâng, ngoại trừ việc không có ECMA-Way để nhập tự động đồng bộ (không có lời hứa).
Well yea, except that there is no ECMA-way to dynamically import synchronously (without promise).

Bây giờ, để hiểu những hậu quả, bạn hoàn toàn có thể muốn đọc về những lời hứa/ASYNC-BÀI VIẾT TẠI ĐÂY, nếu bạn không biết đó là gì.

Nhưng rất chỉ đơn giản là đặt, nếu một hàm trả về một lời hứa, nó có thể được "chờ đợi":

const fs = require('fs');

1

Lời hứa sau đó thường được sử dụng như thế này:

const fs = require('fs');

2

Nhưng khi bạn trả lại một lời hứa, bạn cũng có thể sử dụng Await, điều đó có nghĩa là chúng tôi loại bỏ cuộc gọi lại (thực tế - thực ra, nó đang được thay thế bằng máy tính trạng thái trong trình biên dịch/thông dịch). Bằng cách này, chúng tôi làm cho mã không đồng bộ có cảm giác như đồng bộ, vì vậy bây giờ chúng tôi có thể sử dụng thử bắt để xử lý lỗi. Lưu ý rằng nếu bạn muốn sử dụng đang chờ trong một hàm, chức năng đó phải được khai báo là async (do đó là ASYNC-BÀI VIẾT).
This way, we make asynchronous code feel like synchronous, so we now can use try-catch for error-handling.
Note that if you want to use await in a function, that function must be declared async (hence async-await).

const fs = require('fs');

3

Và cũng xin lưu ý rằng trong JavaScript, không có cách nào để gọi hàm Async (chặn) từ một hàm đồng bộ (những cái bạn biết). Vì vậy, nếu bạn muốn sử dụng Await (AKA ECMA-ISIPPORT), tất cả mã của bạn cần phải đồng bộ hóa, rất có thể là một vấn đề, nếu mọi thứ chưa được đồng bộ ...

Một ví dụ về nơi thực hiện yêu cầu đơn giản hóa này, là khi bạn yêu cầu một tệp không phải là JavaScript hợp lệ, ví dụ: Khi bạn yêu cầu CSS, HTML, TXT, SVG và hình ảnh hoặc các tệp nhị phân khác. Và thật dễ dàng để biết lý do tại sao: nếu bạn, ví dụ: Đặt HTML vào cơ thể chức năng JavaScript, tất nhiên bạn có được
And it's easy to see why:
If you e.g. put HTML into a JavaScript function body, you of course rightfully get

const fs = require('fs');

4

Vì

const fs = require('fs');

6

Bây giờ, nếu bạn muốn mở rộng điều này thành ví dụ bao gồm các mô-đun, bạn chỉ có thể kiểm tra các mục tiêu tệp đã tải xuống cho

const fs = require('fs');

7, và sau đó, ví dụ: Eval ("Nội dung jQuery") thay vì func (hoạt động tốt miễn là bạn ở trong trình duyệt). Vì các bản tải xuống với Fetch/XMLHTTPRequests phải chịu sự chính sách tương tự và tính toàn vẹn được đảm bảo bởi SSL/TLS, việc sử dụng Eval ở đây khá vô hại, miễn là bạn đã kiểm tra các tệp JS trước khi bạn thêm chúng vào trang web của mình, nhưng điều đó Nhiều điều nên là hoạt động tiêu chuẩn.

Lưu ý rằng có một số triển khai của chức năng yêu cầu giống như:

• Định dạng CommonJS (CJS), được sử dụng trong Node.js, sử dụng hàm yêu cầu và mô -đun. Hệ sinh thái NPM được xây dựng theo định dạng này. (Đây là những gì được thực hiện ở trên)used in Node.js, uses a require function and module.exports to define dependencies and modules. The npm ecosystem is built upon this format. (this is what is implemented above)

• Định dạng mô -đun không đồng bộ (AMD), được sử dụng trong trình duyệt, sử dụng hàm xác định để xác định các mô -đun. . Ngoài ra, AMD là định dạng được thực hiện bởi các yêu cầu (lưu ý rằng mặc dù tên chứa các ký tự "yêu cầu", AMD hoàn toàn không phải là phổ biến).overcomplicated archaic crap that you wouldn't ever want to use). Also, AMD is the format that is implemented by RequireJS (note that despite the name containing the characters "require", AMD absolutely is NOT CommonJS).

• Định dạng mô -đun ES (ESM). Kể từ ES6 (ES2015), JavaScript hỗ trợ định dạng mô -đun gốc. Nó sử dụng từ khóa xuất để xuất API công khai mô -đun và từ khóa nhập để nhập nó. Đây là thứ bạn nên sử dụng nếu bạn không đưa ra một f*ck về trình duyệt cổ xưa, chẳng hạn như Safari và IE/EdgeHTML.if you don't give a flying f*ck about archaic browsers, such as Safari and IE/EdgeHTML.

• Định dạng System.Register, được thiết kế để hỗ trợ các mô -đun ES6 trong ES5. . , và CSS và HTML - không định nghĩa các mô -đun của bạn là System.register, mặc dù - định dạng khá phức tạp và hãy nhớ rằng, nó có thể đọc các định dạng dễ dàng hơn khác)the one you should use, if you need support for older browsers (Safari & IE & old versions of Chrome on mobile phones/tablets), because it can load all formats [for some, plugins are required], can handle cyclic-dependencies, and CSS and HTML - don't define your modules as system.register, though - the format is rather complicated, and remember, it can read the other easier formats)

• Định dạng định nghĩa mô -đun phổ quát (UMD), tương thích với tất cả các định dạng được đề cập ở trên (ngoại trừ ECMA), được sử dụng cả trong trình duyệt và trong Node.js. Nó đặc biệt hữu ích nếu bạn viết các mô -đun có thể được sử dụng trong cả NodeJS và trình duyệt. Nó có phần thiếu sót, vì nó không hỗ trợ các mô -đun ECMA mới nhất, mặc dù (có thể điều này sẽ được sửa) - sử dụng System.register thay thế.if you write modules that can be used in both NodeJS and the browser. It's somewhat flawed, as it doesn't support the latest ECMA modules, though (maybe this will get fixed) - use System.register instead.

Sidenote quan trọng trên đối số chức năng "Xuất": JavaScript sử dụng chia sẻ giữa các giá trị-có nghĩa là các đối tượng được truyền như một con trỏ, nhưng giá trị con trỏ được truyền bởi giá trị, không phải bằng tham chiếu. Vì vậy, bạn không thể ghi đè xuất khẩu bằng cách gán nó một đối tượng mới. Thay vào đó, nếu bạn muốn ghi đè xuất khẩu, bạn cần gán đối tượng mới cho mô -đun.
JavaScript uses call-by-value-sharing - meaning objects are passed as a pointer, but the pointer-value itselfs is passed BY VALUE, not by reference. So you can't override exports by assigning it a new object. Instead, if you want to override exports, you need to assign the new object to module.exports - because hey, module is the pointer passed by value, but exports in module.exports is the reference to the original exports pointer.

Tại sao chúng ta sử dụng yêu cầu trong JavaScript?

Những gì là yêu cầu () trong nodejs?

Nhập khẩu và yêu cầu trong JS là gì?

Yêu cầu xác định ở đâu?