Es6的模块化

前端模块话的发展

        es6之前:

• amd规范
• cmd规范

        es6之后:

• se6模块化
  • 每个js文件都是一个独立的模块
  • 导入其它模块使用 import 关键字
  • 向外共享模块使用 export 关键字
• commonJS规范(nodejs)
  • 导入其它模块使用 require 关键字
  • 向外共享模块使用 module.exports 关键字

在nodejs中搭建学习es6模块化的环境

让nodejs支持ES6模块化

        node.js 中默认支持 CommonJS 模块化规范,如果想基于 node.js 体验与学习 ES6 的模块化语法,血药按按照如下两个步骤进行配置

• 确保安装了 v13.0.0 或者更高版本的 node.js

• 在 package.json 的节点中添加"type": "module"节点

  • 生成 package.json
    注意根目录不能有中文
  • 添加 "type": "module" 节点
    注意： 配置之后，则只能使用ES6模块化语法，不能再使用CommonJS语法了

基本文件解构

  1  根目录
  2   ├── index.js              # 主页需要用到的js代码
  3   └── tool.js               # 为整个项目提供公共方法
  

es6模块化内容

默认导入导出

       默认导出的语法: export default 默认导出的成员
       默认导入的语法: import 接收名称 form 模块路径

       注意:
        1. 每个模块中,只允许使用唯一的一次 export default
        2. 默认导入时的接收名称可以任意名称,只要是合法的成员名称即可

按需导入导出

       按需导出语法: export const s1 = 10
       按需求导入语法: import { 按需导入的名称 } from '模块路径'

       注意:
        1.每个模块中可以多次按需导出
        2.按需导入的成员名称必须和按需导出的名称保持一致
        3.按需导入时,可以使用 as 关键字进行重命名

默认导出和按需导出一起用

es6导入导出小结

在tool.js中导出方式	在index.js中导入的方式
export let name=''; export function f=function()	import {name,f} from './tool.js'	正确
export {name,f}	import {name,f} from './tool.js'	正确
export default {name,f}	import obj from './tool.js'	正确
export ｛ name, f}	import obj from './tool.js'	错误
export {name,f}; export default {version};	import obj, {name,f} from './tool.js'	正确

让 chrome 浏览器支持 es6 模块化

文件目录

    1   - index.html #引入 index.js
    2   - index.js   #导入
    3   - tool.js    #导出
    

index.html

index.js

tool.js