Halo
发布于 2022-09-02 / 115 阅读 / 0 评论 / 0 点赞

es6中export和import

export

// A.js
export const A = 42
export const myA = 43
export const Something = 44

///////////////////////////
// more export example
///////////////////////////

// Exporting declarations
export let name1, name2/*, … */; // also var
export const name1 = 1, name2 = 2/*, … */; // also var, let
export function functionName() { /* … */ }
export class ClassName { /* … */ }
export function* generatorFunctionName() { /* … */ }
export const { name1, name2: bar } = o;
export const [ name1, name2 ] = array;

// Export list
export { name1, /* …, */ nameN };
export { variable1 as name1, variable2 as name2, /* …, */ nameN };
export { variable1 as "string name" };
export { name1 as default /*, … */ };

// Default exports
export default expression;
export default function functionName() { /* … */ }
export default class ClassName { /* … */ }
export default function* generatorFunctionName() { /* … */ }
export default function () { /* … */ }
export default class { /* … */ }
export default function* () { /* … */ }
export default function cube(x) {
  return x * x * x;
}

// Aggregating modules
export * from "module-name";
export * as name1 from "module-name";
export { name1, /* …, */ nameN } from "module-name";
export { import1 as name1, import2 as name2, /* …, */ nameN } from "module-name";
export { default, /* …, */ } from "module-name";

import

// B.js
import A, { myA, Something } from './A'

// also can be
import X, { myA as myX, Something as XSomething } from './A'

import cube from './my-module.js';
console.log(cube(3)); // 27

often

// browsers.js
export const defaultBrowser = 'Chrome';

export default [
  { value: 0, label: defaultBrowser },
  { value: 1, label: 'Firefox' },
  { value: 2, label: 'Safari' },
  { value: 3, label: 'Edge' },
];
// call.js
import browsers, { otherValue } from './browsers';

import type

// ok
import type { SomeThing } from "./some-module.js";
export type { SomeThing };

// error
import type { Component } from "react";
interface ButtonProps {
  // ...
}
class Button extends Component<ButtonProps> {
  //               ~~~~~~~~~
  // error! 'Component' only refers to a type, but is being used as a value here.
  // ...
}

// error
// Is only 'Foo' a type? Or every declaration in the import?
// We just give an error because it's not clear.
import type Foo, { Bar, Baz } from "some-module";
//     ~~~~~~~~~~~~~~~~~~~~~~
// error! A type-only import can specify a default import or named bindings, but not both.

评论