sử dụng dấu ngoặc với cú pháp nhập javascript

Tôi đã xem qua một thư viện javascript sử dụng cú pháp sau để nhập các thư viện:

import React, { Component, PropTypes } from 'react';

Sự khác biệt giữa phương pháp trên và phương pháp sau đây là gì?

import React, Component, PropTypes from 'react';

import React, { Component, PropTypes } from 'react';

Điều này nói:

Nhập tệp xuất mặc định từ'react' dưới tên Reactvà nhập các bản xuất được đặt tênComponent và PropTypesdưới cùng tên.

Điều này kết hợp hai cú pháp phổ biến mà bạn có thể đã thấy

import React from 'react';
import { Component, PropTypes } from 'react';

Đầu tiên được sử dụng để nhập và đặt tên cho xuất mặc định, thứ hai để nhập các xuất được đặt tên đã chỉ định.

Theo nguyên tắc chung, hầu hết các mô-đun sẽ cung cấp một bản xuất mặc định, hoặc một danh sách các bản xuất được đặt tên. Một mô-đun có thể cung cấp cả một bản xuất mặc định thì hơi ít bình thường hơn và được đặt tên . Tuy nhiên, trong trường hợp có một đối tượng địa lý được nhập phổ biến nhất, nhưng cũng có các tính năng phụ bổ sung, thì đó là thiết kế hợp lệ để xuất tính năng đầu tiên làm mặc định và các tính năng còn lại được đặt tên là xuất khẩu. Trong những trường hợp như vậy, bạn sẽ sử dụng importcú pháp mà bạn tham khảo.

Các câu trả lời khác nằm ở đâu đó giữa sai và khó hiểu, có thể vì các tài liệu MDN tại thời điểm câu hỏi này được hỏi là sai và khó hiểu. MDN đưa ra ví dụ

import name from "module-name";

và được cho namelà "tên của đối tượng sẽ nhận các giá trị đã nhập." Nhưng điều đó gây hiểu lầm và không chính xác; trước hết, chỉ có một giá trị nhập, giá trị này sẽ được "nhận" (tại sao không chỉ nói "được gán cho" hoặc "được sử dụng để tham chiếu đến")name và giá trị nhập trong trường hợp này là xuất mặc định từ mô-đun .

Một cách khác để giải thích điều này là lưu ý rằng việc nhập khẩu ở trên hoàn toàn giống với

import { default as name } from "module-name";

và ví dụ của OP hoàn toàn giống với

import { default as React, Component, PropTypes } from 'react';

Tài liệu MDN tiếp tục cho thấy ví dụ

import MyModule, {foo, bar} from "my-module.js";

và tuyên bố rằng nó có nghĩa là

Nhập toàn bộ nội dung của mô-đun, với một số cũng được đặt tên rõ ràng. Điều này chèn myModule(sic) foo, và barvào phạm vi hiện tại. Lưu ý rằng foovà myModule.foogiống nhau, như là barvàmyModule.bar

Những gì MDN nói ở đây và những câu trả lời khác khẳng định dựa trên tài liệu MDN không chính xác, là hoàn toàn sai và có thể dựa trên phiên bản trước của thông số kỹ thuật. Điều này thực sự làm là

Nhập xuất mô-đun mặc định và một số xuất khẩu được đặt tên rõ ràng. Chèn này MyModule, foovà barvào phạm vi hiện tại. Tên xuất khẩu foovà barlà không thể truy cập quaMyModule , đó là mặc định xuất khẩu, không phải một số ô bao gồm tất cả xuất khẩu.

(Xuất mô-đun mặc định là giá trị được xuất với export defaultcú pháp, cũng có thể là export {foo as default}.)

Người viết tài liệu MDN có thể đã nhầm lẫn với biểu mẫu sau:

import * as MyModule from 'my-module';

Nhập khẩu này, tất cả xuất khẩu từ my-module, và làm cho họ tiếp cận dưới những cái tên như MyModule.name. Xuất mặc định cũng có thể truy cập được MyModule.defaultvì xuất mặc định thực sự không hơn gì một xuất có tên khác có tên default. Trong cú pháp này, không có cách nào để chỉ nhập một tập hợp con của các xuất đã đặt tên, mặc dù người ta có thể nhập xuất mặc định, nếu có, cùng với tất cả các xuất được đặt tên, với

import myModuleDefault, * as myModule from 'my-module';

import React, { Component, PropTypes } from 'react'

Thao tác này sẽ lấy các { Component, PropTypes }thành viên đã xuất từ 'react'mô-đun và gán chúng cho Componentvà PropTypestương ứng. Reactsẽ bằng với defaultxuất của mô-đun .

Theo ghi nhận của torazaburo dưới đây , điều này giống như

import { default as React, Component, PropTypes } from 'react'

đó là viết tắt của

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

Đây là một ví dụ khác ( liên kết đến ý chính ):

// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'

// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : 'some property only available from default'
  }
*/

// example2.js
import something, { c } from 'myModule'
console.log(something)  // same as above; the `default` export
console.log(c)          // c === 'hello, world!'

// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn't export it individually)
console.log(something.d)  // something.d === 'some property...'

Tôi đã thử nghiệm ví dụ thứ hai với babel:

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

và có lỗi cú pháp.

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

Để tham khảo, bạn có thể đọc importtài liệu mới từ MDN. Tuy nhiên, rõ ràng nó đang cần được xem xét kỹ thuật. Bài đăng trên blog của Tiến sĩ Axel Rauschmayer là một tài liệu tham khảo tốt hơn cho bây giờ.