【备战春招】第2天+commonjs-回顾ES6模块化

模块名	描述
课程名称	前端工程师2022版
课程章节	Node.js基础入门
打卡知识进程	知识进程：2 / 21 ✔1.node.js初体验windows ✔2.commonjs-回顾ES6模块化
主讲老师	Dell
学习开始时间	2023.02.07 22:50
学习结束时间	2023.02.07 23:30
总计时	40 min
课程收获/主要内容/编程目标	commonjs的语法介绍 commonjs和ES6 Module的区别 为何要使用模块化（离组件化学习还有一段距离，加油）
学习感受/感想/领悟（心得）	打卡期间，如果没有如加班的需求，尽量在晚上20左右开始打卡。其他的事情先往后排排。

ES6 Module的模块化

export ... 或 export default ...
import ... from ...
一般用于前端开发

上面这些内容我之前在看公司前端的代码时见过，混了个脸熟，但具体是怎么用的，我没用过，下文可能会讲。
演示 ES6 Module

npm i @vue/cli -g
vue create es6-module-test # 后面一路回车
cd es6-module-test
npm run serve

启动服务访问首页：

文件位置：…/jyb-code/es6-module-test/src/utils.js

function sum(a,b){
    return a + b}export default sum

文件位置：…/jyb-code/es6-module-test/src/App.vue

...import sum from './utils'export default {
  name: 'App',
  components: {
    HelloWorld  },
  mounted(){
    const res = sum(10,20)
    console.log(res)
  }}

运行结果：

上面代码解读：
通过 export default来输出内容。然后通过import的方式来去引用这个内容。

玩法升级：
文件位置：…/jyb-code/es6-module-test/src/utils.js

export function sum(a,b){
    return a + b}// export default sumexport function test(){
    console.log('和只是为了好玩一起在慕课网学习')}

文件位置：…/jyb-code/es6-module-test/src/App.vue

...import {sum,test} from './utils'export default {
  name: 'App',
  components: {
    HelloWorld  },
  mounted(){
    const res = sum(10,20)
    console.log(res)
    test()
  }}

运行结果：