Ở đây mình sẽ nói cách import và export với webpack, mới đây, thiên hạ đang đề nghị hỗ trợ import và export với native javascript
Một giá trị, hàm, object có thể được export từ một file này và dùng câu lệnh import để sử dụng bên trong file khác.
Export
Cú pháp
export {name1, name2, name3,..., nameN}
// export sử dụng alias
export {name1 as differentName1, name2 as differentName2}
// export một biến hoặc hằng số
export let name1, const name2, var name3
export let name1 = 10, const name2 = 20, var name3 = 30
// export một class hoặc function
export default expression;
export default function(...) { ... }
export default function name1(...) {...}Giải thích
Có 2 kiểu export
- Export 1 function đã được khai báo hoặc một giá trị: export có định danh
// exports hàm đã khai báo trước đó
export { myFunction };
// exports một hằng số
export const foo = Math.sqrt(2);- Default Export cho một hàm hoặc class
export default function() {}
export default class {}Khi export có định danh thì khi import cũng phải gọi đúng tên đã export, còn nếu sử dụng default export thì khi import đặt tên là gì cũng được.
export default k = 12; // test.js
import m from './test'
console.log(m); // log 12Trên một file chỉ có thể có một default export, câu lệnh sau không phải là default export
export * from ...;Import
Cú pháp
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";Giải thích
Module export có tên quá dài, có thể đặt alias trong câu import
import {reallyReallyLongModuleExportName as shortName} from '/modules/my-module.js';Import tất cả các giá trị, hàm, object,... đã export trong một file khác
import * as myModule from 'another.file'Import chỉ định một số hàm, object, giá trị trong file
import {funcA, objB, constC} from 'another.file'
Initializing...