Vue前端工程化---模块化的相关规范
Vue前端工程化—模块化的相关规范
一、模块化的分类
1. 浏览器端的模块化
-
AMD(Asynchronous Module Definition,异步模块定义)
代表产品为：Require.js -
CMD(Common Module Definition,通用模块定义)
代表产品为：Sea.js
2. 服务器端的模块化
服务器端的模块化规范是使用CommonJS规范：
- 使用require引入其他模块或者包
- 使用exports或者module.exports导出模块成员
- 一个文件就是一个模块，都拥有独立的作用域
3. 大一统的模块化规范 – ES6模块化
在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
- AMD 和 CMD 适用于浏览器端的 Javascript 模块化
- CommonJS 适用于服务器端的 Javascript 模块化
因此，ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。
ES6模块化规范中定义：
- 每一个js文件都是独立的模块
- 导入模块成员使用import关键字
- 暴露模块成员使用export关键字
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。ES6模块化是浏览器端和服务器端通用的规范.
二、在NodeJS中安装babel–Node.js 中通过 babel 体验 ES6 模块
1. 安装babel
打开终端，输入命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安装完毕之后，再次输入命令安装：
npm install --save @babel/polyfill
2. 创建babel.config.js
在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下：
const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
//暴露
module.exports = { presets }
3. 创建index.js文件
在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
console.log("ok");
4. 使用npx执行文件
打开终端，输入命令：
npx babel-node ./index.js
三、ES6 模块化的基本语法 --设置默认导入/导出
1. 默认导出
export default {
成员A,
成员B,
.......
},如下：
let num = 100;
export default{
num
}
2. 默认导入
import 接收名称 from "模块标识符"，如下：
import test from "./test.js"
// 导入模块成员 import m1 from './m1.js'
console.log(m1) // 打印输出的结果为： // { a: 10, c: 20, show: [Function: show] }
// 当前文件模块为 m1.js
// 定义私有成员 a 和 c let a = 10
let c = 20 // 外界访问不到变量 d ,因为它没有被暴露出去 let d = 30
function show() {}
// 将本模块中的私有成员暴露出去，供其它模块使用 export default {
a,
c,
show
}
注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。
如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象
四、ES6 模块化的基本语法 --设置按需导入/导出
1. 按需导出
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn". }
2. 按需导入
import { num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"
// 导入模块成员 import { s1, s2 as ss2, say } from './m1.js'
console.log(s1) // 打印输出 aaa console.log(ss2) // 打印输出 ccc console.log(say) // 打印输出 [Function: say]
// 当前文件模块为 m1.js
// 向外按需导出变量 s1 export let s1 = 'aaa' // 向外按需导出变量 s2 export let s2 = 'ccc' // 向外按需导出方法 say export function say = function() {}
注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出
五、ES6 模块化的基本语法 --直接导入并执行代码
有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。
import "./test2.js";