[Vue]---模块化相关的规范

什么是模块化

为了解决传统开发模式的主要问题：命名冲突和文件依赖，从而采取模块化

• 模块化:就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
• 模块化的好处:方便代码的重用，从而提升开发效率，并且方便后期的维护

浏览器端模块化规范

1. AMD(已经落伍/淘汰)—只适用于浏览器端

   Require.js(http://www.requirejs.cn)

2. CMD(已经落伍/淘汰)—只适用于浏览器端

   Sea.js(https://seajs.github.io/seajs/docs/)

服务端模块化规范

1. CommonJS—只适用于服务器
   • 模块分为单文件模块与包
   • 模块成员导出:module.exports和exports
   • 模块成员导出:require('模块标识符')

ES6模块规范

ES6语法规范中，在语言层面上定义了ES6模块法规范，是浏览器端与服务器端通用的模块法开发规范。所以解决了上述模块化存在的差异性和局限性

ES6模块化规范中定义：

• 每个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

Node.js中通过babel体验ES6的模块法

首先我们要给他安装babel的依赖包

npm install --save-dev @babel/core @babel/preset-env @babel/node @babel/cli

npm i --save @babel/polyfill

项目根目录创建文件 babel.config.js

const presets = [
    ['@babel/env',
        {
            targets: {
                edge: '17',
                firefox: '60',
                chrome: '67',
                safari: '11.1'
            }
        }
    ]
]
module.exports = { presets }

最后我们通过npx babel-node index.js

ES6模块化的基本语法

默认导出与默认导入

• 默认导出语法 export default 默认导出的成员
• 默认导入语法 import 接受名称 from ‘模块标识符’

我们可以通过代码演示一遍导入和导出

1.首先我们建一个m1.js用于定义变量从而把他导出

let a = 10
let c = 20
let d = 30

function show() {
    console.log('1111111')
}
export default {
    a,
    d,
    show
}

2.我们再来建一个index.js用于导入m1.js

import m1 from './m1.js'
console.log(m1)

然后通过npx babel-node index.js运行index.js就可以访问到m1定义的变量和函数了

注意：每个模块中，只允许使用唯一的一次 export default, 否则会报错

按需导入与按需导出

• 按需导出语法 export let s1 =10
• 按需导入语法 import {s1} from ‘模块标识符’

注意：每个模块中，可以使用多次按需导出