es6环境中，export与import使用方法

柔光的暖阳◎ 2021-09-14 00:30 325阅读 0赞

### 前言 ###

> 参考自阮一峰大神的教程：[http://es6.ruanyifeng.com/?search=export&x=6&y=5\#docs/module\#export-][http_es6.ruanyifeng.com_search_export_x_6_y_5_docs_module_export-]命令

***声明：如有问题，还请各位大神及时指正***

es6环境下，一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

### 初出茅庐 来个Demo（因为最近在学习Vue，所以请先构建好Vue项目） ###

在src目录下，新建common文件夹，新建profile.js，现在我们在profile.js里面加入以下代码

export var firstName = 'Michael';
    
    export var lastName = 'Jackson';
    
    export var year = 1958;
    
    export const SuccMsgCode=0;

等价于

var firstName = 'Michael';
    
    var lastName = 'Jackson';
    
    var year = 1958;
    
    const SuccMsgCode= 0;
    
    export {firstName, lastName, year, SuccMsgCode};

es6会将，profile.js视为一个模块，所以如果希望外部能访问这三个变量，需要将其导出。但是应该优先考虑使用第二种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

在src目录下的main.js文件中 中加入以下代码：

import {firstName, lastName, year, SuccMsgCode} from 'common/profile';
    
    console.log('firstName\t' + firstName);
    
    console.log('lastName\t' + lastName);
    
    console.log('year\t' + year);
    
    console.log('SuccMsgCode\t' + SuccMsgCode);

就会看到firstName，lastName，year, SuccMsgCode正常输出了，但是此种方法是作为变量导入导出的，所以名称必须一致。除非使用 as 命令指定新的名称，例如：

导入时指定别名

export {firstName, lastName, year, SuccMsgCode};
    
    import {firstName, lastName, year, SuccMsgCode as SuccMsgCode1} from 'common/profile';
    
    console.log('SuccMsgCode\t' + SuccMsgCode1);

我们看到SuccMsgCode1正常显示‘Hello World！’

或者，导出时指定别名

export {firstName, lastName, year, SuccMsgCode as SuccMsgCode2 };
    
    import {firstName, lastName, year, SuccMsgCode2} from 'common/profile';
    
    console.log('SuccMsgCode \t' + SuccMsgCode2);

我们看到SuccMsgCode 正常显示‘Hello World！’

还可以直接使用以下语法：

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

我们建议直接使用此种语法，方便又直观，一般不在import时做别名处理。

#### export 不仅能导出变量，还能导出函数和类 ####

在profile.js中加入以下代码：

export function multiply (x, y) { 
      return x * y;
    };

上面代码对外输出一个函数multiply。

在main.js 中加入以下代码：

import {multiply} from 'common/profile';
    
    console.log('multiply\t' + multiply);

multiply函数被打印出来

如果将profile.js中的代码修改为：

export multiply = function (x, y) { 
      return x * y;
    };

等价于

function multiply (x, y) { 
      return x * y;
    };
    export {multiply};

如果将export 修改为 export default 则之前的导入导出变量皆不能使用，因为export default只允许`export`出现一次，而且在使用导入时，不需要加`{}`，代码如下

function multiply (x, y) { 
      return x * y;
    };
    export default {multiply};
    import multiply from 'common/profile';

如果需要导出整个文件，可使用如下代码

export default { 
      data () { return { firstName: 'Michael' };
      },
      methods: {
        multiply (x, y) {
          return x * y;
        }
      }
    };

[http_es6.ruanyifeng.com_search_export_x_6_y_5_docs_module_export-]: http://es6.ruanyifeng.com/?search=export&x=6&y=5#docs/module#export-