javascript - ES6 import {} daripada masalah nama akhiran '..'

Question

Baru-baru ini saya membaca pengenalan ES6 Ruan Yifeng. Saya tidak begitu memahami kawasan yang dibulatkan dalam gambar di bawah.

Artikel tersebut menyebut bahawa akhiran .js tidak boleh ditinggalkan.
Tetapi tulisan berikut muncul di bawah:

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

Siniimport { counter, incCounter } from './lib';不是省略了.jsAda imbuhan?
Berbanding dengan beberapa kod tindak balas yang ditulis oleh orang lain:

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./containers/App.jsx";
import Store from "./store/Store";

import React from "react";这里也省略了.js后缀，但是import App from "./containers/App.jsx";Tetapi nama akhiran telah ditulis sepenuhnya.

Sila minta beberapa pakar untuk menjawab soalan anda: Dalam keadaan apakah kita harus menulis .jsjenis akhiran ini selepas import..daripada, dan bila kita tidak boleh menulis ? Atau adakah kerana orang lain mengkonfigurasi sesuatu dengan alat jadi tidak perlu menulis nama akhiran.
Terima kasih banyak-banyak! ! !

Answer 1

Sila bezakan antara penghuraian asli pelayar dan prapemprosesan alat pembungkusan dahulu.

Pelayar asli

Pelayar memerlukan akhiran semasa menghuraikan pernyataan import Untuk lebih tepat, penyemak imbas mengecam rentetan selepas import sebagai alamat URL. Ini sama seperti menulis background-image: url(./path/to/a.jpg) dalam fail CSS anda. Penyemak imbas akan mendapatkan alamat URL sumber bergantung berdasarkan fail semasa dan BaseURL halaman, dan kemudian menghantar permintaan HTTP ke pelayan. Akhiran tidak begitu penting dalam alamat URL permintaan HTTP Penyemak imbas mengenali Jenis Kandungan dalam pengepala respons HTTP selagi pelayan sumber yang mengehos js atau imej anda boleh bertindak balas dengan betul kepada permintaan HTTP penyemak imbas. anda boleh mentakrifkannya secara santai. ia seperti yang dipersetujui), atau bahkan menipu.

Alat pembungkusan

Dalam kes alat pembungkusan, demi keserasian, pernyataan import dalam js akan diterjemahkan ke dalam pernyataan import untuk pengurusan modul yang dilaksanakan menggunakan ES5, seperti mencari dalam

direktori webpack...__webpack_require__, 浏览器最后加载的是打包后的 bundle 文件，并没有执行 import 语句（大部分浏览器至今尚未实现import）。 这个时候，我们写的 import 后面到底要不要后缀，全凭工具自己定义规则啊，只要工具在编译打包时能找到被依赖模块。比如webpack可以设定先找 .ts 如果没有再找 .es 再找 .js, 如果是一个文件夹，就看文件夹里有没有 index.js，甚至从node_modules

Ringkasan:

1. Alat terjemahan dan pembungkusan: tidak perlu menulis

2. Secara asli menyokong nod ES6: tidak perlu menulis

3. Pelayar yang menyokong ES6 secara asli: Ia hanya perlu ditemui pada pelayan melalui URL Jika HTTP2 benar-benar menjadi popular dan ES6 dilaksanakan sepenuhnya oleh penyemak imbas, dan fail tidak perlu dibungkus, alat pembungkusan akan mempunyai. cara untuk mengendalikannya dengan mudah.

Ringkasan: Jangan tulis

Answer 2

Pendapat peribadi:

1. Contohnya: react, react-dom, vue, dsb. semuanya dikeluarkan oleh penyumbang NPM package (iaitu, modul dibungkus selepas dipasang menggunakan NPM, ia akan disimpan dalam direktori node_modules modul di atas

2. Fail JS bukan modul, (apa yang dikatakan di sini tidak lengkap)

   • disediakan dalam ES6, (gunakan import dan eksport untuk menentukan modul)模块化

   • Dalam Node.js, spesifikasi CommonJS digunakan untuk mentakrifkan modul

3. Syorkan artikel

Answer 3

1. .js不能省略，主要是为了可读，以及区分。假设你目录下有个自己写的模块test，还有一个自己写的js文件test.js。模块是以文件夹形式存在的，然后你用import './test'，你无法确定你加载的是模块还是test.js (Walaupun, dalam ES6, fail JS juga dianggap sebagai modul).

2. Kod iniimport React from "react"，并不是省略了.js，而是直接省略了/index.js。这是一个由npm安装的包，在node_modules文件夹下面，其实它导入的是node_modulesreactindex.js，是整个包的入口文件，然后由index.js再去加载react需要用到的其他子jsfail yang anda lihat

3. Perhatikan bahawa dalam node.js, import语法，所以需要通过require()引入包，用module.exports和exportsbahagian ES6 yang boleh diimport daripada pakej terdedah belum disokong lagi.

Sila lihat dokumentasi MDN untuk butiran