import和export的用法

import

---

概念 : import语句用于导入由另一个模块导出的绑定。无论是否声明了strict mode，导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。

语法 ：

`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";`

defaultExport : 将引用模块默认导出的名称。

如：

导出：export default Index

导入： import defaultExport from './Index'

那么：defaultExport代表 Index（默认导出的名称）

module-name ： 要导入的模块。这通常是包含模块的.js的相对或绝对路径名，不包括.js扩展名。某些打包工具可以允许或要求使用该扩展；检查你的运行环境。只允许单引号和双引号的字符。

name ： 引用时将用作一种命名的空间的模块对象的名称

export，exportN ：要导入的导出名称。

export

概念 ： 用于在创建JavaScript模块时，从模块中导出函数、对象或原始值，一边其他程序可以通过import语句使用它们。

语法：

   `export { name1, name2, …, nameN };
    export { variable1 as name1, variable2 as name2, …, nameN };
    export let name1, name2, …, nameN; // also var
    export let name1 = …, name2 = …, …, nameN; // also var, const
    export function FunctionName() {...}
    export class ClassName {...}

    export default expression;
    export default function (…) { … } // also class, function*
    export default function name1(…) { … } // also class, function*
    export { name1 as default, … };

    export * from …;
    export { name1, name2, …, nameN } from …;
    export { import1 as name1, import2 as name2, …, nameN } from …;`

有两种不同的导出方式，每种方式对应于上述的一种语法： 1.命名导出

`export default function() {}`

如：

导出：

//module "index.js"

`function myFunction(x) {
  return x*2;
}
const a = 4;
export { myFunction,a };`

导入： import { myFunction, a } from 'index.js'; console.log(myFunction(3)); // 6 console.log(a); // 4

2.默认导出（函数/类）

`export default function() {}`

`export default class {}`

如(函数)： 导出：

 `// module "index.js"
export default function myFunction(x) {
  return x*x;
}`

导入：

    `// module "index.js"
    import myFunction from 'index.js';
    console.log(myFunction(3)); // 9`