Vue全家桶：模块化相关规范

1. 模块化概述

• 传统开发模式的主要问题
  • ① 命名冲突
  • ② 文件依赖
• 通过模块化解决上述问题
  • 模块化就是把单独的一个功能封装到一个模块（文件）中
    • 模块之间相互隔离
    • 但是可以通过特定的接口公开内部成员
    • 也可以依赖别的模块
  • 模块化开发的好处:
    • 方便代码的重用，从而提升开发效率，并且方便后期的维护

2. 浏览器端模块化规范

• 1. AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js
  • Require.js (http://www.requirejs.cn/)
    
  2. CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js
  • Sea.js (https://seajs.github.io/seajs/docs/)
    

3. 服务器端模块化规范

服务器端的模块化规范是使用CommonJS规范：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

• ① 模块分为 单文件模块 与 包 ，一个文件就是一个模块，都拥有独立的作用域
• ② 模块成员导出：module.exports 和 exports （使用exports或者module.exports导出模块成员）
• ③ 模块成员导入：require('模块标识符')（使用require引入其他模块或者包）

4. 大一统的模块化规范 – ES6模块化

在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

• AMD 和 CMD 适用于浏览器端的 Javascript 模块化
• CommonJS 适用于服务器端的 Javascript 模块化

因此，ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

ES6模块化规范中定义：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

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

5. 在NodeJS中安装babel

Node.js 中通过 babel 体验 ES6 模块化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

• ① 安装babel: npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
• ② 安装完毕之后，再次输入命令安装:npm install --save @babel/polyfill
• ③ 创建babel.config.js:项目跟目录创建文件 babel.config.js

  // 在项目目录中创建babel.config.js文件。
  // 编辑js文件中的代码如下：
      const presets = [
          ["@babel/env",{
              targets:{
                  edge:"17",
                  firefox:"60",
                  chrome:"67",
                  safari:"11.1"
              }
          }]
      ]
      //暴露
      module.exports = { presets }
  

• ④ babel.config.js 文件内容如下代码
• ⑤ 创建index.js文件:通过 npx babel-node index.js 执行代码
  在项目目录中创建index.js文件作为入口文件
  在index.js中输入需要执行的js代码，例如：
  console.log("ok");
• ⑥ 使用npx执行文件:
  打开终端，输入命令：npx babel-node ./index.js

6. ES6 模块化的基本语法

6.1 默认导出 与 默认导入

• 默认导出语法 export default 默认导出的成员
• 默认导入语法 import 接收名称 from '模块标识符'
• 注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

默认导出文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

    export default {
        成员A,
        成员B,
        .......
    },如下：
    let num = 100;
    export default{
        num
    }

默认导入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

import 接收名称 from "模块标识符"，如下：
import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。
如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

6.2 按需导出 与 按需导入

• 按需导出语法export let s1 = 10
• 按需导入语法 import { s1 } from '模块标识符'
• 注意：每个模块中，可以使用多次按需导出

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

按需导出文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

按需导入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

import { num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

6.3 直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51556.html

import "./test2.js";