"Persamaan dan perbezaan antara import * sebagai React from 'react'; dan import React from 'react';"

Question

Saya perasan bahawa React

import * sebagai React daripada 'react';

...atau import seperti ini: 
import React daripada 'react';


Kaedah pertama mengimport semua kandungan bertindak modul (lihat: Mengimport kandungan keseluruhan modul)
Kaedah kedua hanya mengimport  eksport modul lalai (lihat: Mengimport eksport lalai)

Kedua-dua pendekatan itu kelihatan berbeza dan pada asasnya tidak serasi. 
Mengapa semuanya berfungsi? 

Sila rujuk kod sumber dan terangkan mekanismenya... Saya berminat untuk memahami cara ini berfungsi. 

Kemas kini
Ini bukan soalan pendua, ia berbeza daripada "perbezaan antara import * sebagai tindak balas daripada 'react' vs import react daripada 'react'"
Soalan itu dijawab dengan maklumat modul ES6 am. 
Saya bertanya tentang mekanisme yang membolehkan modul bertindak Nampaknya ada kaitan dengan mekanisme eksport "godam" dalam kod sumber, tetapi tidak jelas cara ia menjadikan kedua-dua cara mengimport keseluruhan modul dan hanya mengimport eksport lalai ke React dengan JSX transpil dan lain-lain. 
            

Answer 1

Anda tsconfig.json 文件中很可能设置了 "allowSyntheticDefaultImports": true,，这实际上让编译器对它认为无效的默认导入保持静默。Typescript 添加了 esModuleInterop, pada dasarnya perkara yang sama dilakukan oleh babel dari segi pemuatan modul.

Ini membolehkan anda menggunakan import lalai ES6 apabila kod sumber yang diimport tidak mempunyai eksport lalai.

Skrip taip adalah ketat (mengikut peraturan) dalam hal ini, sebab itu ia memerlukan anda menggunakan import * as React from 'react'. Atau memerlukan anda memberitahunya dalam konfigurasi asas untuk membenarkan import lalai sintetik.

Lagi maklumat berkaitan

Answer 2

TL;DR

Sebenarnya, pernyataan import ES import default和import *并不是同一回事，它们在这种情况下表现相同是因为React作者选择以这种方式发布库并在TypeScript（使用esModuleInterop) atau Babel dan lapisan keserasian yang digunakan dalam alat pembungkusan menjadikannya "hanya berfungsi". Menurut spesifikasi ES6, ia mungkin tidak berfungsi dengan betul, tetapi hari ini kita masih berada dalam zaman huru-hara modul JS, jadi alatan seperti Babel, TypeScript, Webpack, dll. semuanya cuba menyeragamkan tingkah laku.

Maklumat lanjut:

React bukan perpustakaan ES6. Jika anda melihat kod sumber anda akan melihat ini dalam index.js:

const React = require('./src/React');

// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = React.default || React;

(Perhatikan bahawa walaupun dalam kod sumber React, mereka sedang mengusahakan isu keserasian dengan eksport lalai ES6.)

module.exports =Sintaks ialah CommonJS (NodeJS). Penyemak imbas tidak dapat memahami sintaks ini. Itulah sebabnya kami menggunakan alat pembungkusan seperti Webpack, Rollup atau Parcel. Mereka memahami pelbagai sintaks modul dan menjana fail yang digabungkan yang sepatutnya berfungsi dalam penyemak imbas.

Walau bagaimanapun, walaupun React bukan pustaka ES, kedua-dua TypeScript dan Babel membenarkan anda mengimportnya seperti pustaka ES (pilihan ini telah ditambahkan di bawah Use import语法，而不是require()等），但是CJS和ES之间存在一些需要解决的差异。其中之一是export =可以为你提供ES没有规范兼容的导入方式，比如将函数或类作为模块导入。为了解决这些不兼容性问题，Babel允许你以默认方式导入CJS模块，或者以命名空间方式导入。TypeScript以前不支持这样做，但是最近在esModuleInterop Jadi kini kedua-dua Babel dan TypeScript cukup konsisten membenarkan penggunaan lalai atau ruang nama). Import ES untuk mengimport modul CJS

.

Untuk TypeScript, ia juga bergantung pada cara definisi jenis perpustakaan ditakrifkan. Saya tidak akan pergi ke butiran, tetapi anda boleh bayangkan bahawa terdapat kes di mana import tertentu akan berfungsi dengan baik semasa runtime disebabkan oleh transpiler dan alat pembungkusan, tetapi TypeScript akan membuang ralat pada masa penyusunan.

Satu lagi perkara yang patut dinyatakan ialah jika anda melihat kod binaan React, terdapat juga versi modul UMD serta versi CJS. Versi UMD mengandungi beberapa kod masa jalan yang kompleks untuk menjadikannya berfungsi dengan baik dalam mana-mana persekitaran modul, termasuk pelayar. Ia bertujuan terutamanya untuk digunakan apabila hanya React dimasukkan dalam masa jalan (iaitu tiada alat pembungkusan digunakan). Contoh.

Mengelirukan? Ya, saya juga fikir begitu. :)