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

学习到这里，我体会到了一寸光阴一寸功。
就是之前学 Vue 的时候，一些 npm 相关的学习，如果我知道怎么操作，那么到这里其实我就不用重复学习了，继续往下学，学习还是靠积累。

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 sum
export 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()
  }
}

运行结果：

到这里，通过编码，我明白了 export 和 import 是怎么玩的。