学习笔记--ES6模块化

一  Node.js 中 通过【babel，它是第三方插件 是一个语法转换工具】 体验 ES6 模块化

 新建一个项目文件夹如 00_ES6, 用VSCode打开该目录并切换到Terminal命令输入处

① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

② npm install --save-dev @babel/polyfill

③在项目的根目录下创建文件babel.config.js ，内容如下:

const presets = [
  ["@babel/env",{
    targets:{
      edge: "17",
      firefox: "60",
      chrome: "67",
      safari: "11.1"
    }
  }]
  
];

module.exports = { presets };

④在项目的根目录下创建一个临时测试文件 index.js 内容是: console.log('hello es6');

⑤Terminal命令输入处使用命令测试  npx babel-node index.js

 

二 ES6模块的基本语法----默认导出与默认导入

let a = 10;

let c = 20;

let d = 30;

function show(){

}

// m1.js

//默认导出语法 export default 默认导出的成员 
//1.没有暴漏的成员，在其他地方是不能使用的
//2. export default 只允许出现一次
export default{
    a,
    c,
    show
}

//index.js

//默认导入语法 import 接收名 from '模块标识符'
import m1 from './m1.js'

console.log(m1);

Terminal命令输入处使用命令测试  npx babel-node index.js

 

 三 ES6模块的基本语法----按需导出与按需导入

//在m1.js文件中再写一些按需导出 ， 按需导出可以有多个
export let aa = 'aa';
export let bb = 'bb';
export function say(){
    console.log('say hello ');
}
// 按需导出和默认导出可以同时存在一个文件中的

//index.js
//既有默认导入 又有按需导入
import m1,{aa,bb,say} from './m1.js'

console.log(m1);
console.log(aa);
console.log(bb);
console.log(say);

Terminal命令输入处使用命令测试  npx babel-node index.js

 

四 ES6模块的基本语法----直接导入并执行模块代码

// m2.js

//该模块文件中只有一个for循环操作

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

// 有时候我们只想单纯执行某个模块中的代码，并不需要得到模块对外暴露的成员时，使用下面的方式
//直接导入并执行模块中的代码
import './m2.js'

Terminal命令输入处使用命令测试  npx babel-node index.js