Rumah >hujung hadapan web >tutorial js >Node.js: Sejarah ringkas cjs, bundlers dan esm

Node.js: Sejarah ringkas cjs, bundlers dan esm

Mary-Kate Olsenasal: 2024-12-15 05:36:10390semak imbas

Node.js: A brief history of cjs, bundlers, and esm

pengenalan

Jika anda seorang pembangun Node.js, anda mungkin pernah mendengar tentang modul cjs dan esm tetapi mungkin tidak pasti mengapa terdapat dua dan bagaimana ini wujud bersama dalam aplikasi Node.js. Catatan blog ini akan membimbing anda secara ringkas mengenai sejarah modul JavaScript dalam Node.js (dengan contoh ?) supaya anda boleh berasa lebih yakin apabila berurusan dengan konsep ini.

Skop global

Pada mulanya JavaScript hanya mempunyai skop global apabila semua ahli diisytiharkan. Ini bermasalah semasa berkongsi kod kerana dua fail bebas mungkin menggunakan nama yang sama untuk ahli. Contohnya:

salam-1.js

function greet(name) {
  return `Hello ${name}!`;
}

salam-2.js

var greet = "...";

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collision example</title>
  </head>
  <body>
    <!-- After this script, `greet` is a function -->
    <script src="greet-1.js"></script>

    <!-- After this script, `greet` is a string -->
    <script src="greet-2.js"></script>

    <script>
        // TypeError: "greet" is not a function
        greet();
    </script>
  </body>
</html>

Modul CommonJS

Node.js secara rasmi memperkenalkan konsep modul JavaScript dengan CommonJS (juga dikenali sebagai cjs). Ini menyelesaikan masalah perlanggaran skop global yang dikongsi kerana pembangun boleh memutuskan perkara yang hendak dieksport (melalui module.exports) dan import (melalui require()). Contohnya:

src/greet.js

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

// `exports` is a shortcut to `module.exports`
exports.greet = greet;

src/main.js

// notice the `.js` suffix is missing
const { greet } = require("./greet");

// logs: Hello Alice!
console.log(greet("Alice"));

pakej npm

Pembangunan Node.js meledak dalam populariti berkat pakej npm yang membenarkan pembangun menerbitkan dan menggunakan kod JavaScript yang boleh digunakan semula. pakej npm dipasang dalam folder node_modules secara lalai. Fail package.json yang terdapat dalam semua pakej npm adalah sangat penting kerana ia boleh menunjukkan Node.js fail mana yang menjadi titik masuk melalui sifat "utama". Contohnya:

node_modules/greeter/package.json

{
  "name": "greeter",
  "main": "./entry-point.js"
  // ...
}

node_modules/greeter/entry-point.js

module.exports = {
  greet(name) {
    return `Hello ${name}!`;
  }
};

src/main.js

// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");

// logs: Hello Bob!
console.log(greet("Bob"));

Pengikat

Pakej npm secara mendadak mempercepatkan produktiviti pembangun dengan dapat memanfaatkan kerja pembangun lain. Walau bagaimanapun, ia mempunyai kelemahan utama: cjs tidak serasi dengan pelayar web. Untuk menyelesaikan masalah ini, konsep pengikat telah dilahirkan. browserify ialah pengikat pertama yang pada asasnya berfungsi dengan merentasi titik masuk dan "menggabungkan" semua kod require()-ed ke dalam satu fail .js yang serasi dengan pelayar web. Apabila masa berlalu, pengikat lain dengan ciri tambahan dan pembeza telah diperkenalkan. Terutamanya webpack, parcel, rollup, esbuild dan vite (dalam susunan kronologi).

Modul ECMAScript

Memandangkan modul Node.js dan cjs menjadi arus perdana, penyelenggara spesifikasi ECMAScript memutuskan untuk memasukkan konsep modul. Inilah sebabnya mengapa modul JavaScript asli juga dikenali sebagai ESModules atau esm (singkatan daripada modul ECMAScript).

esm mentakrifkan kata kunci dan sintaks baharu untuk mengeksport dan mengimport ahli serta memperkenalkan konsep baharu seperti eksport lalai. Dari masa ke masa, modul esm memperoleh keupayaan baharu seperti import dinamik() dan menunggu peringkat tertinggi. Contohnya:

src/greet.js

function greet(name) {
  return `Hello ${name}!`;
}

src/part.js

var greet = "...";

src/main.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Collision example</title>
  </head>
  <body>
    <!-- After this script, `greet` is a function -->
    <script src="greet-1.js"></script>

    <!-- After this script, `greet` is a string -->
    <script src="greet-2.js"></script>

    <script>
        // TypeError: "greet" is not a function
        greet();
    </script>
  </body>
</html>

Lama kelamaan, esm mula diterima pakai secara meluas oleh pembangun terima kasih kepada pengikat dan bahasa seperti TypeScript kerana ia mampu mengubah sintaks esm menjadi cjs.

Node.js cjs/esm kebolehoperasian

Disebabkan permintaan yang semakin meningkat, Node.js secara rasmi menambah sokongan untuk esm dalam versi 12.x. Keserasian ke belakang dengan cjs dicapai seperti berikut:

Node.js mentafsir fail .js sebagai modul cjs melainkan package.json menetapkan sifat "jenis" kepada "modul".
Node.js mentafsir fail .cjs sebagai modul cjs.
Node.js mentafsir fail .mjs sebagai modul esm.

Mengenai keserasian pakej npm, modul esm boleh mengimport pakej npm dengan titik masuk cjs dan esm. Walau bagaimanapun, sebaliknya datang dengan beberapa kaveat. Ambil contoh berikut:

node_modules/cjs/package.json

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

// `exports` is a shortcut to `module.exports`
exports.greet = greet;

node_modules/cjs/entry.js

// notice the `.js` suffix is missing
const { greet } = require("./greet");

// logs: Hello Alice!
console.log(greet("Alice"));

node_modules/esm/package.json

{
  "name": "greeter",
  "main": "./entry-point.js"
  // ...
}

node_modules/esm/entry.js

module.exports = {
  greet(name) {
    return `Hello ${name}!`;
  }
};

Perkara berikut berjalan lancar:

src/main.mjs

// notice there's no relative path (e.g. `./`)
const { greet } = require("greeter");

// logs: Hello Bob!
console.log(greet("Bob"));

Walau bagaimanapun, perkara berikut gagal dijalankan:

src/main.cjs

// this remains "private"
const GREETING_PREFIX = "Hello";

// this will be exported
export function greet(name) {
  return `${GREETING_PREFIX} ${name}!`;
}

Sebab mengapa ini tidak dibenarkan adalah kerana modul esm membenarkan menunggu peringkat teratas manakala fungsi require() adalah segerak. Kod itu boleh ditulis semula untuk menggunakan import dinamik(), tetapi kerana ia mengembalikan Promise, ia memaksa untuk mempunyai sesuatu seperti berikut:

src/main.cjs

// default export: new concept
export default function part(name) {
  return `Goodbye ${name}!`;
}

Untuk mengurangkan masalah keserasian ini, sesetengah pakej npm mendedahkan kedua-dua titik masuk cjs dan mjs dengan memanfaatkan sifat "eksport" package.json dengan eksport bersyarat. Contohnya:

node_modules/esm/entry.cjs:

// notice the `.js` suffix is required
import part from "./part.js";

// dynamic import: new capability
// top-level await: new capability
const { greet } = await import("./greet.js");

// logs: Hello Alice!
console.log(greet("Alice"));

// logs: Bye Bob!
console.log(part("Bob"));

node_modules/esm/package.json:

{
  "name": "cjs",
  "main": "./entry.js"
}

Perhatikan cara "utama" menunjuk ke versi cjs untuk keserasian ke belakang dengan versi Node.js yang tidak menyokong sifat "eksport".

Kesimpulan

Itu sahaja (hampir) yang anda perlu tahu tentang modul cjs dan esm (sehingga Dis/2024 ?). Beritahu saya pendapat anda di bawah!

Atas ialah kandungan terperinci Node.js: Sejarah ringkas cjs, bundlers dan esm. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript typescript json ecmascript html npm webpack if for include require Conditional Property JS function default this promise history Other

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mendapatkan Teks Terpilih daripada Senarai Jatuh Bawah Menggunakan jQuery?Artikel seterusnya：Bagaimanakah Saya Boleh Mendapatkan Teks Terpilih daripada Senarai Jatuh Bawah Menggunakan jQuery?

Artikel berkaitan

Lihat lagi