ES6模块化

ES6模块化

①

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

②

npm install --save @babel/polyfill

③

项目跟目录创建文件 babel.config.js

④

babel.config.js 文件内容如下侧代码

⑤

通过 npx babel-node index.js 执行代码

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

1. 默认导出 与 默认导入

• 默认导出语法 export default 默认导出的成员
• 默认导入语法 import 接收名称 from ‘模块标识符’

import m1, { s1, s2 as ss2, say } from "./m1.js";
console.log(m1);
console.log(s1);
console.log(ss2);
console.log(say);

let a = 10;
let b = 20;
let c = 30;
function show() {
  console.log("1111");
}
// 只能使用一次
export default {
  a,
  c,
  show,
};

2. 按需导出 与 按需导入

• 按需导出语法 export let s1 = 10
• 按需导入语法 import { s1 } from ‘模块标识符’

// 导入模块成员
import { s1, s2 as ss2, say } from './m1.js'
console.log(s1) // 打印输出 aaa
console.log(ss2) // 打印输出 ccc
console.log(say) // 打印输出 [Function: say]

// 当前文件模块为 m1.js
// 向外按需导出变量 s1
export let s1 = 'aaa' 
// 向外按需导出变量 s2
export let s2 = 'ccc'
// 向外按需导出方法 say
export function say = function() {}

3. 直接导入并执行模块代码

// 直接导入并执行模块代码
import './m2.js'

// 当前文件模块为 m2.js
// 在当前模块中执行一个 for 循环操作
for(let i = 0; i < 3; i++) {
 console.log(i)
}