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

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

运行结果：