ES6 导入导出总结

1.nodejs - 采用CommonJs规范

规范要求导出和导入使用关键字:

导出:   module.exports  或 exports   (导出的就是对象以及里面的key和value值)

    module.exports = {
      key: () => {},
      a: 10
    }

    exports.key = 10

导入:    const 变量 = require("模块标识")  - 模块标识: 模块名字  /  模块路径

2.ES6 的三种导入导出

    2.1 默认导出和导入

        默认导出的语法: export default {默认导出的成员}

        默认导入的语法: import 变量名称 from '模块路径'

   导出文件.js

const a = 10
const b = 20 
const fn = () => {
  console.log("模块内 - 箭头函数")
}

// 导出
export default {   // 导出对象,里面装集体的key和上面值
  a,
  b:b,
  myFn:fn
}

导入文件.js

// 注意: .js后缀名必须得写 -babel不会自动去添加后缀名
import Obj from "./导出文件.js"
console.log(Obj)

补充:

如果在html文件使用   导入文件.js   的时候,需要注意:

1.使用模块的那个文件引入进来

2.浏览器对import支持性还不高,需要babel.js预处理(import翻译成浏览器认识的代码)后,再被浏览器执行

3.引入babel.js,给import代码的标签添加type='text/babel',告诉浏览器这个script代码要被babel处理后你再来执行
 

2.2 按需导出和导入

按需导出的语法:  export const s1 = 10       export const 变量名 = 值(普通值/函数)

按需导入的语法: import {按需导入的名称} from '模块路径'

// 按需导出的方式
export const a = 10
export const b = 20 
export const fn = () => {
   console.log("模块内 - 箭头函数")
}




// 按需导入
// 补充: 可以用as关键字给变量起别名
import {fn as theFn,a} from './text6.js'
console.log(theFn,a)

补充:

1.可以用as关键字给变量起别名

2.      . 代表当前文件所在文件夹

        ./ 访问当前文件夹下的东西

        如果不写  ./  默认找同级目录下的这个文件

3.按需导入导出可以和默认导入导出同时在一个文件夹里使用,但是按需导入导出可以使用多次,默认导入导出只能使用一次

2.3 无变量直接导入一个模块

无导出.js

 for(let i = 0, i < 10; i++) {
  console.log(i)
 }

// 无导出,就是一个普通要执行的模块

导入.js

 import "./无导出.js"

// 目的:为了让模块文件执行一次