Viewing: zh.javascript.info

exportimport

export

          // 
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

//  const 
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 
export class User {
  constructor(name) {
    this.name = name;
  }
}
        

export

JavaScript

export class export function

          export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  //  ;
        

export

          //  say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 
        

export

Import *

import {...}

          //  main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!
        

import * as <obj>

          //  main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');
        

webpack

say.js

          //  say.js
export function sayHi() { ... }
export function sayBye() { ... }
export function becomeSilent() { ... }
        

say.js

          //  main.js
import {sayHi} from './say.js';
        

optimizertree-shaking

sayHi() say.sayHi()

Import as

as

sayHi hi sayBye bye

          //  main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!
        

Export as

hi bye

          //  say.js
...
export {sayHi as hi, sayBye as bye};
        

hi bye

          //  main.js
import * as say from './say.js';

say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!
        

Export default

say.js
user.js class User

navigation

export default

          //  user.js
export default class User { //  "default" 
  constructor(name) {
    this.name = name;
  }
}
        

export default

          //  main.js
import User from './user.js'; //  {User} User 

new User('John');
        

import import


`export class User {...}`	`export default class User {...}`
`import {User} from ...`	`import User from ...`

          export default class { // 
  constructor() { ... }
}
        

          export default function(user) { // 
  alert(`Hello, ${user}!`);
}
        

          // 
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        

export default import

default

          export class { // Error!
  constructor() {}
}
        

default

default

          function sayHi(user) {
  alert(`Hello, ${user}!`);
}

//  "export default" 
export {sayHi as default};
        

user.js

          //  user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
        

          //  main.js
import {default as User, sayHi} from './user.js';

new User('John');
        

* default

          //  main.js
import * as user from './user.js';

let User = user.default; // 
new User('John');
        

          import {User} from './user.js';
//  {MyUser}  {User}
        

          import User from './user.js'; // 
import MyUser from './user.js'; // 
// 
        

          import User from './user.js';
import LoginForm from './loginForm.js';
import func from '/path/to/func.js';
...
        

Re-export export ... from ...

          export {sayHi} from './say.js'; //  sayHi

export {default as User} from './user.js'; //  default

package NPM package package helpers

          auth/
    index.js
    user.js
    helpers.js
    tests/
        login.js
    providers/
        github.js
        facebook.js
        ...
        

auth/index.js

import {login, logout} from 'auth/index.js'

auth/index.js

package auth/index.js

          //  auth/index.js

//  login/logout 
import {login, logout} from './helpers.js';
export {login, logout};

//  User
import User from './user.js';
export {User};
...
        

package import {login} from "auth/index.js"

export ... from ... -

          //  auth/index.js
//  login/logout
export {login, logout} from './helpers.js';

//  User
export {default as User} from './user.js';
...
        

export ... from import/export auth/index.js login/logout

user.js export default class User User

          //  user.js
export default class User {
  // ...
}
        

export User from './user.js'

export {default as User}

export * from './user.js'

          export * from './user.js'; // 
export {default} from './user.js'; // 
        

export

class/function/
- export [default] class/function/variable ...
- export {x [as y], ...}.
- export {x [as y], ...} from "module"
- export * from "module"
- export {default [as y]} from "module"

- import {x [as y], ...} from "module"
- import x from "module"
- import {default as x} from "module"
- import * as obj from "module"
- import "module"

import/export

          sayHi();

// ...

import {sayHi} from './say.js'; //

{...} import/export

          if (something) {
  import {sayHi} from "./say.js"; // Error: import must be at top level
}
        

request