Node.js: Sejarah ringkas cjs, bundlers dan esm-tutorial js-php.cn

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}!`;
}

Salin selepas log masuk

salam-2.js

var greet = "...";

Salin selepas log masuk

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>

Salin selepas log masuk

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;

Salin selepas log masuk

src/main.js

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

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

Salin selepas log masuk

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"
  // ...
}

Salin selepas log masuk

node_modules/greeter/entry-point.js

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

Salin selepas log masuk

src/main.js

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

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

Salin selepas log masuk

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}!`;
}

Salin selepas log masuk

src/part.js

var greet = "...";

Salin selepas log masuk

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>

Salin selepas log masuk

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;

Salin selepas log masuk

node_modules/cjs/entry.js

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

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

Salin selepas log masuk

node_modules/esm/package.json

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

Salin selepas log masuk

node_modules/esm/entry.js

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

Salin selepas log masuk

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"));

Salin selepas log masuk

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}!`;
}

Salin selepas log masuk

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}!`;
}

Salin selepas log masuk

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"));

Salin selepas log masuk

node_modules/esm/package.json:

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

Salin selepas log masuk

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!