javascript中import和export详解

import 和 require 的区别

import 和js的发展历史息息相关，历史上 js没有模块(module)体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型工程非常不方便。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。也就是我们常见的 require 方法。 比如 let { stat, exists, readFile } = require('fs'); 。
ES6 在语言标准的层面上，实现了模块功能。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

import 的几种用法:

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

import用法解释

• import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。某些打包工具可以允许或要求使用扩展名。
• 上面代码使用的 " as " 关键字，相当于import 进来的‘值’的别名。
• import * from 'xx' 将导入整个模块的内容，而 import defaultName 和 import { export1， export2 } 将导入export的某个对象或值
• 最后一种方式 import 'modules' 将运行模块中的全局代码，而不导入任何值。
• import的形式需要export的支持，比如 import defaultName from 'module.js 将导出 在modules.js中export default的对象或值。

相对路径：基础路径为代码文件的路径

如下图示，引入apis目录下的index.js文件的相对路径：../apis/index

带@的路径：

表示指定路径名，可以由webpack配置
在vuejs里，我们在引用模板插件的时候，会用到“@”符号，如下代码：

import Hello from '@/components/Hello

它是什么意思呢？其实很简单，这是webpack的路径别名，相关定义在这里：

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

此段代码一般在vuejs项目里的build目录下webpack.base.conf.js里，大家可以去看下，它的含义其实就是js里的src。

在vuejs里，很多这种应用，比如扩展名.vue.js.json，这样做的好处就是可以大大的减少代码量；在平常的项目里，我们自己也可以去定义一些变量做同样的处理。

动态导入

静态导入在页面加载时就会被导入，有时模块太大且不会在页面加载时使用，可以使用动态导入，在需要用的时候在导入模块。

**

// 方法一：
import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
    });

// 方法二：
let module = await import('/modules/my-module.js');

// 方法三：动态导入默认接口
(async () => {
  if (somethingIsTrue) {
    const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
  }
})();

export详解

如上，export也是es6的内容，和import是一对。

export的几种用法

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 …;

export用法解释

• 命名导出

比如：

const ex1 = 'xxx';
const fun = function() {...}
export { ex1, fun as demoFun};
export let ex2 = 'demo';
export function multiply(x, y) {
  return x * y;
};

对应的import 写法

import { ex1, demoFun, ex2, multiply } from 'module.js';

• 默认导出
  export 命名导出需要export 名字和import名字严格一致。而export default命令，为模块指定默认输出，在import 的时候可以随意命名名字。一个模块只能有一个默认输出，也就是说 export default 一个模块只能用一次。
  用法:

// a.js 输出一个默认函数
export default function add(x, y) { return x + y; }
import anyName from 'a.js';
// b.js 输出一个默认变量
let name = 'b.js';
export default name;
import anyName from 'b.js'
// c.js 输出一个类
export default class { ...}
import anyClass from 'c.js';
// d.js  输出一个值
export default 1;
import value from 'd.js'

• export 和 import 混合使用(模块重定向)
  也就是在一个模块之中，先输入后输出同一个模块。比如:
  如:

export { foo, bar } from 'my_module';
// 等价为，值得注意的是 在该模块中不能直接使用 foo 和 bar。
import { foo, bar } from 'my_module';
export { foo, bar };

export * from  './other-module';  // 导出所有方法，但注意此种方法不会到导出module.js中的默认导出变量。
// 导出 默认导出用下面写法
export {default} from './other-module';