nhập Javascript
Câu lệnh nhập Javascript được sử dụng để nhập các liên kết được xuất bởi một mô-đun khác. Sử dụng tính năng nhập, mã sẽ dễ quản lý hơn khi mã có kích thước nhỏ và nhỏ
Đây là suy nghĩ đằng sau việc giữ các chức năng chỉ cho một tác vụ hoặc có các tệp chỉ chứa một vài hoặc một thành phần tại một thời điểm
Nếu bạn có một ứng dụng web phức tạp và phải cuộn qua hàng trăm hoặc hàng nghìn dòng mã, thì công việc gỡ lỗi hoặc hiểu một ứng dụng sẽ trở nên khó khăn hơn nhiều.
Đây là cách bạn có thể viết mã trong một tệp và chia sẻ mã đó để một tệp khác
Nếu bạn đang sử dụng cú pháp ES6 trong giao diện người dùng hoặc phụ trợ, thì ý tưởng nhập và xuất giống nhau, nhưng cú pháp hơi khác một chút
Thay vì 'yêu cầu' ở đầu tệp, giờ đây bạn sử dụng câu lệnh 'nhập' và bạn cũng có thể có câu lệnh 'xuất mặc định hoặc xuất' thay vì mô-đun. xuất khẩu. Nếu bạn chỉ có một thứ để xuất ra khỏi tệp hoặc nhiều mô-đun
Không thể sử dụng câu lệnh nhập trong tập lệnh được nhúng trừ khi tập lệnh có mô-đun type='. ’
Ngoài ra còn có chức năng nhập động giống như hàm [], không yêu cầu tập lệnh của mô-đun type=’. ’
Nhập động rất hữu ích trong trường hợp bạn muốn tải mô-đun theo điều kiện hoặc mô-đun theo yêu cầu. Tuy nhiên, dạng tĩnh thích hợp hơn cho phụ thuộc tải ban đầu
Cú pháp của mô-đun nhập như sau. Nó có rất nhiều cú pháp vì nó phụ thuộc vào việc chúng ta nhập một nội dung hay nhiều nội dung từ một tệp
import defaultExport from 'module_name'; import * as name from 'module_name'; import { content } from 'module_name'; import { content as alias } from 'module_name'; import { content , content2 } from 'module_name'; import { content , content2 } from "module-name/path/to/specific/un-exported/file"; import { content , content2 as alias2 , [...] } from 'module_name'; import defaultExport, { content [ , [...] ] } from 'module_name'; import defaultExport, * as name from 'module_name'; import 'module_name'; var content = import['module_name'];
Tham số tên là "đối tượng mô-đun", sẽ được sử dụng làm không gian tên để tham chiếu đến quá trình xuất
Các tham số xuất chỉ định các lần xuất được đặt tên riêng lẻ, trong khi cú pháp nhập * dưới dạng tên sẽ nhập tất cả chúng. Dưới đây là các ví dụ để làm rõ cú pháp
Tạo một thư mục dự án và bên trong thư mục dự án, tạo ba tệp
- ứng dụng. js
- dữ liệu. js
- bắt đầu. js
Bây giờ, nút. js không hỗ trợ Chức năng xuất nhập khẩu theo mặc định. Vì vậy, chúng tôi cần một trình biên dịch babel để làm việc.
Chúng ta cần cài đặt hai gói cho điều đó. Vì vậy, trước tiên hãy chuyển đến thiết bị đầu cuối và nhập lệnh sau để tạo gói. tệp json
npm init -y
Sau đó, chúng ta cần cài đặt hai mô-đun nút. Vì vậy, gõ lệnh sau
npm install babel-register babel-preset-env --save-dev
Nó sẽ cài đặt các mô-đun bên trong thư mục node_modules
Bây giờ, hãy viết đoạn mã sau vào phần bắt đầu. tập tin js
// start.js require['babel-register'][{ presets: ['env'] }]; module.exports = require['./app.js']
Ta sẽ chạy file này để chạy câu lệnh xuất nhập trong app. tệp js
Bước tiếp theo là viết đoạn mã sau bên trong dữ liệu. tệp js
// data.js export const add = [x, y] => { return x + y }
Hàm add chấp nhận các tham số và thêm chúng và trả về kết quả. Đây là cú pháp là ES6 và chúng tôi đã sử dụng chức năng mũi tên
Cuối cùng, thêm mã sau vào trong ứng dụng. tệp js
// app.js import { add } from './data'; console.log[add[2, 3]];
Tại đây, chúng tôi đã nhập mô-đun dữ liệu và chức năng thêm cụ thể từ mô-đun đó
Bây giờ, hãy bắt đầu. js và xem đầu ra
node start.js
Trong ví dụ trên, chúng tôi đã sử dụng Nhập một lần xuất từ một mô-đun.
Nếu chúng tôi có nhiều mô-đun xuất, thì chúng tôi có thể nhập các mô-đun khác nhau
Nhập nhiều mô-đun trong Javascript
Bây giờ, chúng ta sẽ tạo một mô-đun khác bên trong dữ liệu. tệp js
// data.js export const add = [x, y] => { return x + y } export const subtract = [x, y] => { return x - y; }
Bây giờ, hãy nhập cả hai mô-đun bên trong ứng dụng. tệp js
________số 8_______Cuối cùng, chạy bắt đầu. js và xem đầu ra
Nhập Javascript với bí danh thuận tiện hơn
Bạn có thể đổi tên một bản xuất khi nhập nó. Ví dụ: điều này sẽ chèn phụ vào phạm vi hiện tại
Xem ứng dụng. tệp js. Chúng tôi đã đổi tên mô-đun trừ thành phụ
import { add, subtract as sub } from './data'; console.log[`The addition is: ${add[2, 3]}`]; console.log[`The suntraction is: ${sub[21, 19]}`];
Nhập giá trị mặc định trong Javascript
Hãy nói; . tệp js
npm init -y0
Trong đoạn mã trên, chúng tôi đã sử dụng từ khóa xuất mặc định, có nghĩa là chúng tôi chỉ xuất mô-đun thêm từ tệp này
Bây giờ, nếu chúng ta có một mô-đun mặc định bên trong dữ liệu. js, chúng ta có thể nhập nó vào bên trong ứng dụng. js như bên dưới
npm init -y1
Xem đầu ra bên dưới
Nhập * trong Javascript
Thông thường, chúng tôi đặt danh sách những gì cần nhập trong dấu ngoặc nhọn import {…}
Tạo một tệp có tên khách hàng. js và thêm đoạn mã sau
npm init -y2
Khách hàng. tệp js xuất hai chức năng. Vì vậy, chúng tôi có thể nhập cả hai chức năng bên trong ứng dụng. tệp js
Bây giờ, hãy thêm mã sau vào trong ứng dụng. tệp js
npm init -y3
Vì vậy, chúng tôi đã nhập tất cả các mô-đun dưới dạng siêu anh hùng
Xem đầu ra
npm init -y4
Nhập động trong Javascript
Từ khóa nhập khẩu có thể được gọi là chức năng nhập động mô-đun. Khi được sử dụng theo cách này, nó sẽ trả lại lời hứa. Hãy xem ví dụ
npm init -y5
Nó sẽ cho cùng một đầu ra. Trong đoạn mã trên, chúng tôi đã sử dụng tính năng async-await của ES7
Nếu bạn chưa quen với điều đó, thì hãy xem bài viết này
Nhập động rất hữu ích khi bạn muốn tải mô-đun theo điều kiện hoặc theo yêu cầu
Dạng tĩnh thích hợp hơn cho các phụ thuộc tải ban đầu và có thể hưởng lợi dễ dàng hơn từ các công cụ phân tích tĩnh và rung chuyển cây
Sửa chữa. không thể sử dụng câu lệnh nhập bên ngoài mô-đun
Đây là gì? . use import statement outside a module error and how to fix it.
Đó là một lỗi cú pháp Uncaught. Sự cố xảy ra do câu lệnh nhập là cú pháp ES6 và nút. js hiểu cú pháp mô-đun yêu cầu. Vì vậy, trước tiên, bạn cần biên dịch mã của mình thành es5 và sau đó chạy tệp máy chủ nút theo cách đó và nó sẽ hoạt động tốt
Tất cả các trình duyệt chính hiện hỗ trợ Mô-đun ES6 nguyên bản. Tôi đã bắt đầu một số thử nghiệm đơn giản để bắt đầu và đoán xem, ngay lập tức gặp sự cố
Có vẻ như nhiều cuộc nói chuyện ngẫu nhiên xung quanh Mô-đun Javascript thực ra là về cách các sản phẩm như Webpack hoặc Babel sử dụng kiến trúc Mô-đun và có những khác biệt tinh tế và quan trọng so với cách nó được triển khai trong JavaScript gốc
Câu lệnh nhập tĩnh được sử dụng để nhập các liên kết được xuất bởi một mô-đun khác.
Các mô-đun đã nhập ở chế độ nghiêm ngặt cho dù bạn có khai báo chúng như vậy hay không
Không thể sử dụng câu lệnh nhập trong tập lệnh nhúng trừ khi tập lệnh có type=”mô-đun”
Dưới đây là một ví dụ về câu lệnh nhập với mô-đun loại
loại = "mô-đun"
Điều tuyệt vời về Mô-đun Javascript là bạn có thể nhập và xuất Chức năng giữa các tệp
Tại bất kỳ thời điểm nào, tệp HTML chính của bạn sẽ phải có ít nhất một thẻ script tải tệp javascript chính của bạn. Trong trường hợp này, thẻ tập lệnh của bạn phải có thuộc tính loại mới bằng với mô-đun, như thế này
npm init -y6
Nếu bạn không bao gồm npm init -y
7Có rất nhiều sự cố và lỗi khác nhau gây nhầm lẫn vô cùng
firefox
Lỗi cú pháp. khai báo nhập chỉ có thể xuất hiện ở cấp cao nhất của mô-đun
Trình duyệt Chrome
Lỗi cú pháp chưa bắt được. số nhận dạng không mong đợi
Bờ rìa
SCRIPT1086. SCRIPT1086. Câu lệnh nhập hoặc xuất mô-đun không mong muốn ở đây
Vì vậy, hãy thêm type= “module” vào thẻ tập lệnh của bạn
Có rất nhiều nguyên nhân dẫn đến sự cố nêu trên xảy ra
Ví dụ: bạn có thể có tệp nguồn trong thư mục src thay vì tệp được tạo trong thư mục dist
Điều này có nghĩa là bạn đang sử dụng mã nguồn gốc ở trạng thái chưa thay đổi/không phân nhóm, dẫn đến lỗi sau. Lỗi cú pháp chưa bắt được. Không thể sử dụng câu lệnh nhập bên ngoài mô-đun
Bạn có thể khắc phục sự cố bằng cách xây dựng tệp tập lệnh và nhập chúng
Một vấn đề khác có thể là bạn đang tải tệp sử dụng es6 với các tệp js bình thường;
Bạn có thể thêm type=”module” với thẻ script và sự cố đã được giải quyết
Nút. js phiên bản mới nhất giải pháp
Xác minh rằng bạn đã cài đặt phiên bản Node mới nhất. Nếu gần đây bạn đã cập nhật phiên bản Node, thì cờ –experimental-modules không còn cần thiết nữa.
Thực hiện theo bất kỳ tùy chọn nào sau đây để khắc phục sự cố
Thêm “loại”. “mô-đun” đến gói cha gần nhất. json
Với điều này, tất cả . js và . Các tệp mjs được hiểu là các mô-đun ES. Bạn có thể hiểu các tệp riêng lẻ là CommonJS bằng cách sử dụng . tiện ích mở rộng cjs .
HOẶC LÀ
Đặt tên rõ ràng cho các tập tin với. phần mở rộng mjs
Tất cả các tệp khác, chẳng hạn như. js, sẽ được hiểu là CommonJS, mặc định nếu loại không được xác định trong gói. json
Phần kết luận
Dưới đây là tất cả các loại nhập xuất trong Javascript
Xuất khẩu
Trước khi khai báo một lớp/hàm/…
xuất [mặc định] lớp/hàm/biến…
Xuất khẩu độc lập
xuất {x [như y], …}
tái xuất
xuất {x [như y], …} từ “mô-đun”
xuất * từ “mô-đun” [mặc định không xuất lại]
xuất {mặc định [như y]} từ “mô-đun” [xuất lại mặc định]
Nhập khẩu
Xuất khẩu được đặt tên từ mô-đun
nhập {x [như y], …} từ “mô-đun”
xuất mặc định
nhập x từ “mô-đun”nhập {mặc định là x} từ “mô-đun”
Mọi điều
nhập * dưới dạng obj từ “mô-đun”
Nhập mô-đun [mã của nó chạy], nhưng không gán nó cho một biến
nhập khẩu mô-đun. ”
Bạn có thể tham khảo thêm cách nhập Javascript trên MDN
Vì vậy, trong ví dụ này, chúng ta đã thấy cách sử dụng câu lệnh nhập javascript, câu lệnh xuất, nhập động