es6中import Task和import {Task}有什么区别

Question

What is the difference between

import { Tasks } from '../api/tasks.js';

and

import Task from './Task.jsx';

when to use {} and when to not use {} ?

(by the way, this is from meteor tutorial https://www.meteor.com/tutorials/react/update-and-remove )

Answer 1

You don't have to use the {} when you precise that it's a default export.

For example :

export default class Test{}

You can do :

import Test from './test'

In the other hand, if you don't precise "default" keyword, you have to precise {} :

export class Test {}

gives

import { Test } from './test'

Answer 2

if you want to grab the all modules you can do

import * as test from "Test";

If you exporting only some modules and not all then you have to specify wictch module you want

import { Module1, Module2, Module3 } from "Modules"; //grab only given in {}

if you have only export default Test you can to

import "Test";

read more about modules

Answer 3

when you do

 import { Tasks } from '../api/tasks.js';

you are importing Task module from '../api/tasks.js';

when you do

import Tasks  from '../api/tasks.js';

you are importing default export module from '../api/tasks.js'; Here Task is a variable which is referring default export module.

Example.

task.js export default Task;

case 1: It is Task from task.js case 2: It is Task variable pointing to Task module in task.js that is Task

if I do import someVariable from './api/task.js' still it will work because someVarible will point to default export module that is Task module in task.js

If I do

import {someVariable} from './api/task.js' it will search for module someVariable in task.js but it is not there so now it is undefined.