zoukankan      html  css  js  c++  java
  • 学习笔记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

    ----------- 赠人玫瑰,手有余香     如果本文对您有所帮助,动动手指扫一扫哟   么么哒 -----------


    未经作者 https://www.cnblogs.com/xin1006/ 梦相随1006 同意,不得擅自转载本文,否则后果自负
  • 相关阅读:
    hdu 5001(概率DP)
    hdu 5505(数论-gcd的应用)
    csu 1749: Soldiers ' Training(贪心)
    Button Bashing(搜索)
    Jury Jeopardy(反向模拟)
    interesting Integers(数学暴力||数论扩展欧几里得)
    湖南省第六届省赛题 Biggest Number (dfs+bfs,好题)
    csu 1551(线段树+DP)
    csu 1555(线段树经典插队模型-根据逆序数还原序列)
    csu 1552(米勒拉宾素数测试+二分图匹配)
  • 原文地址:https://www.cnblogs.com/xin1006/p/15802392.html
Copyright © 2011-2022 走看看