babel的使用

本文详细介绍了如何使用Babel进行ES6模块化开发,包括安装配置、编写.babelrc文件指定ES版本,以及export和import的联合应用示例。通过具体代码演示了不同导出方式的使用方法。

一、安装

命令:

cnpm install babel-cli -g (cmd控制台以管理员身份运行)
cnpm install babel-preset-es2015 --save-dev  (在idea终端进行局部安装)

二、编写.babelrc文件,指定es版本

.babelrc

{
  "presets": ["es2015"]
}

三、export和import联合应用

exportsDemo1.js

//方式一
/*
export let name = "itbw";
export let age = 21;
export let gender = "男";
export let say=(str)=>console.log(str);
*/
//方式二
let name = "itbw";
let age = 21;
let gender = "男";
let say= function (str){
    console.log(str);
}
export {name,age,gender,say};

exportsDemo2.js

export default {
    eat(sth){
        console.log("eat"+sth);
    },
    drink(sth){
        console.log("drink"+sth);
    }
}

importDemo1.js

import {name,age,gender,say} from "./exportsDemo1";
console.log(name,age,gender);
say("hello");

importDemo2.js

import abc from "./exportsDemo2"
abc.eat("美食");
abc.drink("饮料");

四、执行命令

命令:

babel-node importDemo1.js
babel-node importDemo2.js
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值