模块化学习记录

模块化规范分类：

• 浏览器端的模块化规范：AMD，CMD。代表分别为Require.js和Sea.js
• 服务器端的模块化规范：CommonJS规范，特点是使用require引入其他模块或者包，使用exports或者module.exports导出模块成员。
• ES6模块化规范，特点是导入模块成员使用import关键字，暴露模块成员使用export关键字。并且每一个js文件都是独立的模块

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

为了在node环境中使用ES6模块化规范，我们需要安装babel对我们的代码进行处理。

//安装依赖
  npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
  npm install --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 XXX.js

ES6的导出 导入方式

1、默认导入/导出

默认导出
    export default {
        成员A,
        成员B,
        .......
      }
默认导入
    import 接收名称 from "模块标识符"。

注：一个模块只能有一个默认导出。如果一个模块没有一个默认导出，则被引入的时候只有一个空对象，不会报错
    

2、按需导入/导出

按需导出
    export a1 = 998;
    export a2 = "jack";

按需导入 
    import { a1,a2 as aaaa  } from "xxx.js"
    
    //同时导入默认导出的成员以及按需导入的成员
    import test,{a1,a2 } from ".xxx.js"
    
注:一个模块中既可以按需导入也可以默认导入

3、直接导入

 import "./XXX.js";
 会直接执行导入文件的代码。

CommonJS的导入导出

//单个导出
module.exports a1= 1
module.exports.a2 = function(){}

//整体导出
module.exports = { a1: 1, a2(){} }

//引入
const foo = require('./foo.js')

注：需要在node环境下使用