JavaScript - ES6 import {} from '..' サフィックス名の問題

Question

最近、Ruan Yifeng の ES6 入門書を読みました。下の図の丸で囲ったところがよくわかりません。

この記事では、.js サフィックスは省略できないと述べられています。
しかし、次のような記述が以下に表示されます:

リーリー

Hereimport { counter, incCounter } from './lib';.js サフィックス名が省略されていませんか?
他の人が書いたいくつかの反応コードとの比較:

リーリー

import React from "react";.js サフィックスもここでは省略されていますが、import App from "./containers/App.jsx"; しかし、サフィックス名は完全に書き出されていました。

何人かの専門家に私の質問に答えてもらいたいです: どのような状況で import..from の後に .js のようなサフィックス名を記述すべきであり、どのような場合に記述すべきでないか書く ＃＃ ＃。それとも、誰かがツールを使ってサフィックス名を書く必要がないように設定したためでしょうか。 ＃＃＃どうもありがとう！ ！ ！

Answer 1

ブラウザのネイティブ解析とパッケージ化ツールの前処理を区別してください。

ブラウザネイティブ

ブラウザは import ステートメントを解析するときにサフィックスを必要とします。より正確には、ブラウザはインポート後の文字列を URL アドレスとして認識します。これは、CSS ファイルに background-image: url(./path/to/a.jpg) を記述するのと同じです。ブラウザは、現在のファイルとページの BaseURL に基づいて依存リソースの URL アドレスを取得し、HTTP リクエストをサーバーに送信します。 JS またはイメージをホストするリソース サーバーがブラウザの HTTP リクエストに正しく応答できる限り、ブラウザは HTTP リクエストの URL アドレスではそれほど重要ではありません。サフィックスは自由に定義できます (もちろん、一般的なリソース サーバーには、ファイル拡張子から HTTP 応答ヘッダーの MIMEType へのマッピングがあります。サーバーが正しく応答できるように、他のカスタム サフィックスを追加することもできますが、それが最善です)。同意したとおりに設定する)、またはチートすることもできます。URL は http://a.com/b.jpg です。返されるコンテンツは、応答ヘッダー
application/javascript を持つテキスト文字です。

梱包ツール

パッケージ化ツールの場合、互換性のため、jsのインポート文は、webpackの__webpack_require__, 浏览器最后加载的是打包后的 bundle 文件，并没有执行 import 语句（大部分浏览器至今尚未实现import）。 这个时候，我们写的 import 后面到底要不要后缀，全凭工具自己定义规则啊，只要工具在编译打包时能找到被依赖模块。比如webpack可以设定先找 .ts 如果没有再找 .es 再找 .js, 如果是一个文件夹，就看文件夹里有没有 index.js，甚至从node_modulesディレクトリ内を検索するなど、ES5で実装されたモジュール管理のインポート文に変換されます...

概要:

1. 翻訳およびパッケージ化ツール: 書く必要はありません

2. ES6 ノードをネイティブにサポート: 記述する必要はありません

3. ES6 をネイティブにサポートするブラウザ: URL を通じてサーバー上で ES6 を見つける必要があるだけで、HTTP2 が実際に普及し、ES6 がブラウザに完全に実装され、ファイルをパッケージ化する必要がなくなると、パッケージ化ツールは次のようになります。簡単に対処する方法。

まとめ: 書かないでください

Answer 2

個人的な意見:

1. 例: React、react-dom、vue などはすべてコントリビューター NPM package によってリリースされます (つまり、パッケージ化された modules )。これらはすべて、NPM を使用してインストールされた後、node_modules ディレクトリに保存されます。上記モジュール

2. JS ファイルはモジュールではありません (ここで述べられていることは完全ではありません)

   • は ES6 で提供されます (インポートとエクスポートを使用してモジュールを定義します)模块化

   • Node.js では、CommonJS 仕様を使用してモジュールを定義します

3. 記事をおすすめします

Answer 3

1. .js不能省略，主要是为了可读，以及区分。假设你目录下有个自己写的模块test，还有一个自己写的js文件test.js。模块是以文件夹形式存在的，然后你用import './test'，你无法确定你加载的是模块还是test.js (ただし、ES6 では、JS ファイルもモジュールとみなされます)。

2. このコードimport React from "react"，并不是省略了.js，而是直接省略了/index.js。这是一个由npm安装的包，在node_modules文件夹下面，其实它导入的是node_modulesreactindex.js，是整个包的入口文件，然后由index.js再去加载react需要用到的其他子jsあなたが見ているファイル

3. node.js では、ES6 の公開パッケージの import语法，所以需要通过require()引入包，用module.exports和exportsインポート可能な部分はまだサポートされていないことに注意してください。

詳細については、MDN ドキュメントを参照してください