javascript - ES6 import {} from '..' suffix name problem-PHP Chinese Network Q&A

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.jssuffix 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.jssuffix is also omitted here, butimport 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.jsafterimport..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! ! ! ###

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 writingbackground-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.tsfirst, and if not, then search for.esand then.js. If it is a folder, check whether there isindex.jsin the folder, or even start fromnode_modulesFind it in the directory...

Summary:

Translation and packaging tool: no need to write

Natively supports ES6 node: no need to write

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.

reply all (3)

迷茫2017-06-26 10:54:54 3 floor

Please distinguish between browser native parsing and packaging tool preprocessing.

Translation and packaging tool: no need to write
Natively supports ES6 node: no need to write
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

Like+0

Add Reply

ringa_lee2017-06-26 10:54:54 2 floor

Personal opinion:

For example: react, react-dom, vue, etc. are all released by contributorsNPM package(that is, packagedmodules). After being installed using NPM, they will be stored in the node_modules directory. These are all mentioned above The module mentioned
The JS file is not a module, (what is said here is not complete)
- providesmodularizationin ES6, (use import and export to define modules)
- In Node.js, the CommonJS specification is used to define modules
Recommend an article

过去多啦不再A梦2017-06-26 10:54:54 1 floor

.jscannot be omitted, mainly for readability and distinction. Suppose you have a self-written moduletestand a self-written js filetest.jsin your directory. Modules exist in the form of folders, and then you useimport './test', and you cannot be sure whether you are loading a module ortest.js(although, in ES6, a JS file is also considered a module) .
The code you seeimport React from "react"does not omit.js, but directly omits/index.js. This is a package installed by npm. Under thenode_modulesfolder, it actually importsnode_modulesreactindex.js, which is the entry file of the entire package. Thenindex.jsis used to loadreact. Other sub-jsfiles
Note that in node.js, theimportsyntax of ES6 is not supported yet, so you need to introduce the package throughrequire(), and use module.exportsandexportsto expose the importable parts of the package .