Vue框架之ES6模块化

◆ 模块化的分类：

1、浏览器端的模块化：

• AMD(Asynchronous Module Definition,异步模块定义)，代表产品为：Require.js
• CMD(Common Module Definition,通用模块定义)，代表产品为：Sea.js

2、服务器端的模块化：

服务器端的模块化规范是使用CommonJS规范：

• 使用require引入其他模块或者包
• 使用exports或者module.exports导出模块成员
• 一个文件就是一个模块，都拥有独立的作用域

3、ES6模块化：

ES6模块化规范中定义：

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

注：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

◆ ES6模块化开发步骤：

1、在NodeJS中安装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

◆ 设置默认导入/导出：

1、默认导出

export default {
    成员A,
    成员B,
    .......
}

示例：

let num = 100;
export default{
    num
}

2、默认导入

import 接收名称 from "模块标识符"

示例：

import test from "./test.js"

注：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象。

◆ 设置按需导入/导出：

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 "./test2.js";