模块化的相关规范

一：可以了解模块化的相关规范

1.模块化的分类

a.浏览器端的模块化

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

b.服务器端的模块化

服务器端的模块化规范是使用CommonJS规范：
    1).使用require引入其余模块或者包
    2).使用exports或者module.exports导出模块成员
    3).一个文件就是一个模块，都拥有独立的做用域

c.ES6模块化

ES6模块化规范中定义：
        1).每个js文件都是独立的模块
        2).导入模块成员使用import关键字
        3).暴露模块成员使用export关键字

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

2.模块化初体验（在NodeJS中安装babel）

a.安装babel

打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安装完毕以后，再次输入命令安装：npm install --save @babel/polyfill

b.建立babel.config.js

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

c.建立index.js文件

在项目目录中建立index.js文件做为入口文件
在index.js中输入须要执行的js代码，例如：
    console.log("ok");

d.使用npx执行文件

打开终端，输入命令：npx babel-node ./index.js

小结：babel（语法转换工具）能够将高级的有兼容性的JavaScript代码，转换为低级的没有兼容性的JavaScript代码.配置好如上就能够支持咱们使用那些高级的es6特性了（围绕此文件）.

3.设置默认导入/导出

a.默认导出

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

b.默认导入

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

注意：1)在一个模块中，只容许使用export default向外默认暴露一次成员，千万不要写多个export default。2)若是在一个模块中没有向外暴露成员，其余模块引入该模块时将会获得一个空对象

4.设置按需导入/导出

a.按需导出

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

b.按需导入

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

注意：一个模块中既能够按需导入也能够默认导入，一个模块中既能够按需导出也能够默认导出

5.直接导入并执行代码

import "./test2.js";
//此时不含接收名称和from可直接使用

冲冲冲
下一篇：webpack的使用