javascript - ES6 import {} from '..' suffix name problem

Question

Recently I was reading Ruan Yifeng’s ES6 introduction. I don’t quite understand the areas circled in the picture below.

The article mentioned that the .js suffix cannot be omitted.
But the following writing appears below:

// 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

Hereimport { counter, incCounter } from './lib';Isn't the .js suffix name omitted?
Compared with some react codes written by others:

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";The .js suffix is ​​also omitted here, but import App from "./containers/App.jsx"; But the suffix name was written out completely.

I would like to ask some experts to answer my questions: Under what circumstances should I write a suffix name like .js after import..from, and when should I not write
. Or is it because someone else configured something with a tool so there is no need to write a suffix name.

Many thanks! ! ! ###

Answer 1

Please distinguish between browser native parsing and packaging tool preprocessing.

Browser native

The browser needs a suffix when parsing the import statement. To be more precise, the browser recognizes the string after the import as a URL address. This is the same as writing background-image: url(./path/to/a.jpg) in your CSS file. The browser will obtain the URL address of the dependent resource based on the current file and the BaseURL of the page, and then send an HTTP request to the server. The suffix is ​​not that important in the URL address of the HTTP request. The browser recognizes the Content-Type in the HTTP response header. As long as the resource server hosting your js or image can correctly respond to the browser's HTTP request, you can define it as you like. Suffix (of course, the general resource server will have a mapping from the file extension to the HTTP response header MIMEType. You can add other custom suffixes so that the server can respond correctly, but it is best to configure it as agreed), or even cheat. The URL is http://a.com/b.jpg. The returned content is a text character with the response header
application/javascript.

Packaging tools

In the case of packaging tools, for the sake of compatibility, the import statements in js will be translated into import statements for module management implemented in ES5, such as webpack's __webpack_require__. The last thing the browser loads is the packaged bundle file, and The import statement is not executed (most browsers have not yet implemented import). At this time, whether the import we write should be followed by a suffix or not depends entirely on the tool itself to define the rules, as long as the tool can find the dependent module when compiling and packaging. For example, webpack can be set to search for .ts first, and if not, then search for .es and then .js. If it is a folder, check whether there is index.js in the folder, or even start from node_modules Find it in the directory...

Summary:

1. Translation and packaging tool: no need to write

2. Natively supports ES6 node: no need to write

3. Browsers that natively support ES6: It only needs to be found on the server through the URL. If HTTP2 really becomes popular and ES6 is fully implemented by the browser, and the files do not need to be packaged, the packaging tool will have a way to handle it easily.

Summary: don’t write

Answer 2

Personal opinion:

1. For example: react, react-dom, vue, etc. are all released by contributors NPM package (that is, packaged modules). After being installed using NPM, they will be stored in the node_modules directory. These are all mentioned above The module mentioned

2. The JS file is not a module, (what is said here is not complete)

   • provides modularization in ES6, (use import and export to define modules)

   • In Node.js, the CommonJS specification is used to define modules

3. Recommend an article

Answer 3

1. .js cannot be omitted, mainly for readability and distinction. Suppose you have a self-written module test and a self-written js file test.js in your directory. Modules exist in the form of folders, and then you use import './test', and you cannot be sure whether you are loading a module or test.js (although, in ES6, a JS file is also considered a module) .

2. The code you see import React from "react" does not omit .js, but directly omits /index.js. This is a package installed by npm. Under the node_modules folder, it actually imports node_modulesreactindex.js, which is the entry file of the entire package. Then index.js is used to load react. Other sub-js files

3. Note that in node.js, the import syntax of ES6 is not supported yet, so you need to introduce the package through require(), and use module.exports and exports to expose the importable parts of the package .

Please see MDN documentation for details