ES6模块化 默认导出/按需导出; Node.js模块化 导入/

ES6模块化

• 概念：模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块；这样方便代码的重用，从而提升开发效率，方便后期维护

• ES6模块化定义: 每个JS文件都是一个独立的模块，导入模块成员import, 暴露模块成员export

• node中默认支持commonjs模块化(require方式)；对于es6模块化(import方式)支持并不好，所以需要通过babel第三方插件在node中使用ES6的模块化

  • 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}

---

• 1.引入的文件中有 默认导出 和 按需导出同时存在; as取别名

import m, {s1 as sss1, say} from './m1'     

m.show();                                   // 'c'
console.log(sss1)                           // 'a'
say();                                      // 'hello'

• m1.js

let a = 1;
let b = 2;
let c = 3;

let show = ()=>{
    console.log('c')
}

//默认导出 只能一个文件中使用一次
export default {
    a,b,show
}

export let s1 = 'a';
export let s2 = 'b';
export function say() {
    console.log('hello');
}

---

• 2.也可直接导入并执行模块代码

import './m1'

• m1.js

for(var i = 0; i < 3; i++){
    console.log(i);
}

---

Node.js模块化

• 模块作用域：防止全局变量污染，和函数作用域类似。在自定义模块（js文件）中定义的变量、方法成员，只能在当前模块内被访问。这种模块级别的访问限制叫做模块作用域

• 模块作用域优点：防止全局变量污染；比如在javascript中使用<script src>引入js，先后引入有相同值的变量（声明在全局中的），后引入会覆盖前面的；

javascript：访问引入的声明在全局中的变量，后引入会覆盖前面的； Node.js：无法访问引入文件的全局变量username

• module.exports对象：自定义模块中可使用该对象将模块内的变量、方法暴露出去。外界require()方法导入，得到module.exports对象

const m = require('./utils/demo');

console.log(m.username);                  // 'zhangsan'
m.say();                                  // 'hello'

module.exports.username = 'zhangsan';

module.exports.say = function(){
    console.log('hello');
}

• exports对象：简化module.exports；指向的是同一个对象；

const m = require('./utils/demo2');

console.log(m.username);                // undefined
console.log(m.age);                     // 22

exports.username = 'lisi';

module.exports = {
    age: 22,
    say(){
        console.log('你好');
    }
}