ES6模块化是什么？怎样导入和执行模块中的代码？

ゝ一纸荒年。 2023-10-07 19:32 48阅读 0赞

在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：

①AMD 和 CMD 适用于浏览器端的 Javascript 模块化

②CommonJS 适用于服务器端的 Javascript 模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的 ES6 模块化规范诞生了!

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。

ES6 模块化规范中每个 js 文件都是一个独立的模块，导入其它模块成员需要使用 import 关键字，向外共享模块成员使用 export 关键字。

在node.js中我们可以体验ES6模块化：

node.js 中默认仅支持 CommonJS 模块化规范，若想基于node.js 体验与学习 ES6 的模块化语法，可以按照如下两个步骤进行配置：

① 确保安装了 v14.15.1 或更高版本的 node.js

② 在 package.json 的根节点中添加 “type”: “module” 节点

默认导出的语法： export default 默认导出的成员，导出语法如以下文件所示：

letn1=10//定义模块私有成员n1
    let n2 = 20 //定义模块私有成员n2 (外界访问不到n2, 因为它没有被共享出去)
    function show() {
        } //定义模块私有方法show
    []
    export default {
         //使用export default 默认导出语法，向外共享n1和show 两个成员
    n1,
    show
    }

默认导入的语法： import 接收名称 from ‘模块标识符’，导入语法如以下文件所示：

//从01_ _m1.js 模块中导入export default 向外共享的成员
    //并使用m1成员进行接收
    import m1 from ' ./01_ m1.js'
    
    //打印输出的结果为:
    //{
        n1:10，show: [Function: show] }
    console. log(m1 )

注意事项：  
在默认导出中每个模块，只允许使用唯一的一次 export default，否则会报错!示例代码如下以下文件：

letn1=10//定义模块私有成员n1
    let n2 = 20 //定义模块私有成员n2 (外界访问不到n2,因为它没有被共享出去)
    function show() {
        } /1定义模块私有方法show
    
    export default {
         //使用export default 默认导出语法，向外共享n1和show 两个成员
    n1,
    show
    }
    // SyntaxError: Identifier ' .default' has already been declared 
    export default {
        
    n2
    }

默认导入时的接收名称可以任意名称，只要是合法的成员名称即可，示例代码如下：

// m1是合法的名称
    // import m1 from './01_ m1.js '
    
    // 123m 不是合法的名称，因为成员名称不能以数字开头
    import 123m from ' ./01 m1.js '

按需导出的语法： export 按需导出的成员，导出语法如以下文件所示：

//当前模块为03_ m2.js
    
     //向外按需导出变量s1
    exportlets1='aaa
     //向外按需导出变量s2
     export let s2 = 'CCC '
     //向外按需导出方法say
     export function say() {
        }

按需导入的语法： import \{ s1 \} from ‘模块标识符’，导入语法如以下文件所示：

//导入模块成员
    import {
         s1, s2, say } from ' ./03_ m2.js '
    
    console.log(s1) //打印输出aaa
    console. log(s2) // 打印输出CCC
    console.log(say) //打印输出[Function: say]

按需导出与按需导入的注意事项：

①每个模块中可以使用多次按需导出

②按需导入的成员名称必须和按需导出的名称保持一致

③按需导入时，可以使用 as 关键字进行重命名

④按需导入可以和默认导入一起使用  
如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：

//当前文件模块为05_ m3.js
    
    //在当前模块中执行一个 for 循环操作
    for(let i=0; i<3; i++) {
        
      console.log(i)
    }
    
    //-----------------分割线-----------------
    
    //直接导入并执行模块代码，不需要得到模块向外共享的成员
    
    import ' ./05_ m3.js'

### 前端web开发全套课程 ###

### 第一阶段 基础入门 ###

**1.Web前端零基础入门HTML5+CSS3+前端项目**

课程中和课程尾配备两个实战项目，项目一类型是企业站，可以让同学们快速的将基础知识点进行反复练习；项目二类型是电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准。本教程严格按照专业的开发流程：专业的测量工具，做到100%还原设计稿。

[**web前端开发入门教程，前端零基础html5+css3+前端项目视频教程**][web_html5_css3]

**2.移动web开发实战**

本课程采用2+5模式, 前两天承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每天课程都有完整的案例或项目， 让学生学以致用。

[**web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）**][web_html5_css3_b]

### 第二阶段 技术进阶 ###

**1.JavaScript深入浅出-0基础入门神器**

学完本课程你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。

[**JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门**][JavaScript_Web_JS_JavaScript]

**2.JavaScript核心之Web APIs**

学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。  
[**JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作**][JavaScript_JS_DOM BOM]

**3.数据交互&异步编程-前端进阶Ajax零基础入门**

本课程案例丰富，知识点配套的案例丰富多样，满足学生学习的兴趣 ；深入原理，会深入讲解如何封装自己的模板引擎和 Ajax 函数；涵盖广泛，涵盖了 Ajax、跨域、JSONP、模板引擎、节流防抖、XHR Level2 等常用技术。

[**AJAX零基础到精通\_整合Git核心内容全套教程**][AJAX_Git]

### 第三阶段 VUE开发 ###

**1.前端高级Node.js零基础入门教程**

本套课程作为框架前置课，重点为学生铺垫 npm、包、模块化、身份认证、CORS 跨域等主要知识点，为学习后面的 Vue 课程夯实基础。同时，本课程涵盖了 MySQL 数据库、API 接口项目开发等后端内容，拓宽了学生的知识面，为前端学生构建了前后端完整的知识体系，助力学生更好地发展。

[**Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等\_Nodejs实战案例详解**][Node.js_nodejs_es6_npm_express_webpack_promise_Nodejs]

**2.前端框架Vue2+Vue3全套视频**

历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！

[**Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程**][Vue_vue2.0_vue3.0]

### 第四阶段 React&小程序开发 ###

**1.前端React精品教程**

React 是时下最流行的前端框架之一，是很多大厂的首选前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。

[**React精品教程， React零基础入门到原理详解**][React_ React]

**2.手把手快速带你开发微信小程序**

本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。学完基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。

[**前端微信小程序开发教程，微信小程序从基础到发布全流程\_企业级商城实战(含uni-app项目多端部署)**][uni-app]

[web_html5_css3]: https://www.bilibili.com/video/BV1Kg411T7t9
[web_html5_css3_b]: https://www.bilibili.com/video/BV1xq4y1q7jZ
[JavaScript_Web_JS_JavaScript]: https://www.bilibili.com/video/BV1ux411d75J
[JavaScript_JS_DOM BOM]: https://www.bilibili.com/video/BV1k4411w7sV
[AJAX_Git]: https://www.bilibili.com/video/BV1zs411h74a
[Node.js_nodejs_es6_npm_express_webpack_promise_Nodejs]: https://www.bilibili.com/video/BV1a34y167AZ
[Vue_vue2.0_vue3.0]: https://www.bilibili.com/video/BV1zq4y1p7ga
[React_ React]: https://www.bilibili.com/video/BV1gh411U7JD
[uni-app]: https://www.bilibili.com/video/BV1834y1676P