在前端开发中，使用模块化已经成了一种必需，而ES2015中提供的模块规范便大大简化了前端模块开发的难度。ES2015的模块规范主要包含两个关键字：import和export，本文将对其进行详细解释。
import
在ES2015中，使用import关键字引入模块，语法如下：
import ModuleName from 'path/to/module';
其中，ModuleName表示模块的默认暴露，只能有一个；path/to/module则是模块的路径。如果模块的默认暴露是一个函数，则可以这样写：
import { functionName } from 'path/to/module';
如果模块的默认暴露是一个对象，则可以这样写：
import { propertyName } from 'path/to/module';
需要注意的是，如果要引入的模块没有设置默认暴露，则需要用"*"表示要全部引入，如下：
import * as AllModuleName from 'path/to/module';
以上就是使用import引入模块的基本语法，下面通过一个例子来加深理解。
-- -------------------- ---- ------- -- --------- ------ ----- ---- - ------- ------ -------- ------- - ------ ------ - - ----- - -- ------ ------ - ----- - ---- ----------- --------------------- -- ----- ----展开代码
export
在ES2015中，默认情况下，每一个模块都是一个独立的作用域，需要通过export暴露模块中的变量和函数，语法如下：
export const variableName = "variableValue"; export function functionName() {}; export default variableName;
其中，export default表示默认暴露，可以在import时直接用ModuleName引入。具体使用如下：
// module.js const name = "John"; export default name; // app.js import Name from './module'; console.log(Name); // John
需要注意的是，export只有在文件的最上方才能被使用，否则会报错。因此建议将所有的export语句都放在文件的最上方。
总结
ES2015的模块规范的出现，大大简化了前端开发中的模块化编程，同时提高了代码的可读性和可维护性。在使用import和export时，需要注意默认暴露的处理和export语句的位置，具体应用也需要根据实际需求来灵活应用。
希望本文的介绍对您的学习和实践有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a09adeadd4f0e0ff8de1b4
