Rumah  >  Artikel  >  hujung hadapan web  >  Analisis ringkas tentang cara menggunakan sintaks import dalam nod

Analisis ringkas tentang cara menggunakan sintaks import dalam nod

青灯夜游
青灯夜游ke hadapan
2023-03-21 18:53:223729semak imbas

Node.js menyokong sintaks import Ia adalah titik pengetahuan yang mudah, tetapi ia boleh mengingatkan kita untuk keluar daripada salah faham pengetahuan, memberi lebih perhatian kepada dunia luar pengetahuan dan sentiasa membuka sempadan pengetahuan kita sendiri.

Analisis ringkas tentang cara menggunakan sintaks import dalam nod

pemodulasi js

Spesifikasi modular arus perdana hadapan, pada masa ini terdapat yang berikut:

  • CommonJS, spesifikasi yang dicadangkan oleh Node.js
  • Modul ECMAScript, ESM, spesifikasi standard JavaScript yang dicadangkan oleh organisasi ECMAScript
  • Spesifikasi yang telah dihapuskan termasuk: CMD, AMD, dsb. , dan kemudian kompleks UMD ( Menyokong koleksi pelbagai spesifikasi)

Oleh itu, terdapat dua spesifikasi arus perdana, CommonJS dan ESM, tetapi kerana Node.js tidak menyokong ESM spesifikasi, banyak kali Terdapat dua kod standard wujud bersama dalam projek kami, jadi situasi berikut berlaku:

// 在node端执行构建的时候
const _ = require('loadsh')

// 在浏览器端实现的时候
import _ from 'loadsh';

Dengan cara ini, titik kesakitan mudah berlaku dalam pembangunan Selalunya penyelesaian kami adalah untuk menyelesaikannya melalui pelbagai alatan pembinaan Contohnya: webpack vite, terutamanya apabila kita menulis skrip kompilasi node.js dalam projek, kita sering perlu menukar. [Tutorial berkaitan yang disyorkan: tutorial video nodejs, Pengajaran pengaturcaraan]

Tetapi selepas versi Node.js V14+, ia mula menyokong spesifikasi ESM, anda boleh terus Sintaks seperti import export digunakan dalam Node.js akhirnya saya menunggu hari ini?

PS: Sebenarnya, ciri ini telah ditambah seawal Node.js V8.5, tetapi ia sentiasa diperlukan untuk mendayakan ciri ini melalui pembolehubah global –experimental-modules Disebabkan ketidakstabilan, kebanyakan projek tidak menghidupkannya, tetapi sejak 16+, kami boleh menggunakannya dengan berani dalam projek, tetapi beberapa projek purba mengesyorkan untuk tidak menghidupkannya buat masa ini.

Cara menggunakan

Mari kita baca arahan yang berkaitan daripada laman web rasmi:

Node.js mempunyai dua spesifikasi modul: CommonJSSpesifikasi Modul dan ECMAScriptSpesifikasi Modul Pembangun boleh memberitahu Node.js untuk menggunakan spesifikasi .mjs untuk melaksanakan kod dengan menetapkan bendera package.json atau type=module dalam sambungan fail node xxx.js --input-type. Tanpa tetapan ini, Node.js akan menggunakan ECMAScript untuk pelaksanaan. CommonJSModul Node.js: Modul ECMAScript

Melalui perkara di atas kita boleh mengetahui beberapa kaedah penggunaan:

  • Tukar akhiran fail kepada

    , apabila node.js dimuatkan, ia akan menggunakan spesifikasi .mjs secara automatik ESM

  • untuk menambah item konfigurasi baharu

    dalam projek, kemudian .js dalam keseluruhan projek Fail akan dilaksanakan mengikut package.json spesifikasi "type":"module"ESM

  • Meningkatkan parameter pelaksanaan
  • juga boleh mencapai kesan yang sama

    --input-type

Pelbagai kaedah penggunaan 1. Kaedah konvensional:

2 >3. Sokongan
import _ from 'lodash';

import { readFile } from 'fs';

import Demo from './Demo.mjs'; // 绝对路径或相对路径都可以

export readFile;
export default readFile;
Formatkan borang URL

// 由于参数不同, 这个会让`foo.mjs`被加载两次,而不会利用缓存中的`foo.mjs`
import './foo.mjs?query=1'; // loads ./foo.mjs with query of "?query=1"
import './foo.mjs?query=2'; // loads ./foo.mjs with query of "?query=2"
4. Paksa fail dimuatkan ke dalam format tertentu, seperti:

data:

, dsb.
import 'data:text/javascript,console.log("hello!");'; // text/javascript 会将后面的内容当成js模块
import { test } from 'data:text/javascript,function test(){console.log("test")};export {test};'; // 这里我们是不是扩宽思路,直接加载在线js呢?

import _ from 'data:application/json,"world!"' assert { type: 'json' }; // application/json 则是json

// application/wasm for Wasm

json 5. Muatkan modul spesifikasi commonjs javascriptwebassembly Sudah tentu , ia juga menyokong pemuatan modul spesifikasi commonjs, penggunaannya adalah seperti berikut:

import fooData from './foo.json' assert { type: 'json' };

6 import() import asynchronous Penggunaan ini sangat biasa. Ia tidak perlu dimuatkan dalam masa nyata Ia akan dimuatkan apabila diperlukan

7. Menyokong import daripada http/https (ciri eksperimen)
import { default as cjs } from 'cjs'; // module.exports 导出
import cjsSugar from 'cjs'; // module.exports
import * as m from 'cjs';
kini merupakan ciri percubaan , terdapat sekatan, seperti:

const { default: barData } =
  await import('./bar.json', { assert: { type: 'json' } });
Tidak menyokong protokol http2/3

Protokol http hanya boleh digunakan untuk alamat IP tempatan seperti 127.0. 0.1

Kuki, Keizinan, dsb. Maklumat tidak akan dibawa dan dihantar
  • Hanya fail js yang dilaksanakan pada hujung jauh akan dimuatkan dan fail lain yang bergantung pada hujung jauh akan tidak dimuatkan
  • Penghadan
import worker_threads from 'node:worker_threads';
import { configure, resize } from 'https://example.com/imagelib.mjs';
configure({ worker_threads });

Satu-satunya sekatan: apabila spesifikasi ESM dihidupkan, anda hanya dibenarkan untuk mengisi atau , tidak dibenarkan menggunakan atau , dan ralat akan dilaporkan:

importexportRingkasanrequiremodule.exports

Malah, ini bukan pengetahuan yang popular Selagi anda memberi sedikit perhatian kepada Node.js, anda pada dasarnya boleh memahami ciri ini.
const a  = require('a')
           ^
ReferenceError: require is not defined in ES module scope, you can use import instead
    at file:///Users/borfyqiu/Desktop/study/github/qiubohong.github.io/code/demo-rollup/test.mjs:4:12
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)

Tetapi sebagai seseorang yang tidak memberi perhatian, mudah untuk jatuh ke dalam salah faham pengetahuan anda sendiri, Anda akan sentiasa berfikir bahawa Node.js tidak menyokong spesifikasi ESM, malah mengeluh tentang sebab Node.js. tidak menyokongnya? Jadi inilah ayat yang perlu anda ingatkan kepada diri sendiri - [Tidak ada jalan di gunung buku, dan ketekunan adalah jalan, dan tidak ada batasan untuk lautan pembelajaran, dan perahu ialah bot].

Untuk lebih banyak pengetahuan berkaitan nod, sila lawati:

tutorial nodejs

!

Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan sintaks import dalam nod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam